007 走上移動開發之安卓項目實戰(小帥新聞:新聞主介面布局 以及導航條的實現)

上次跟大家已經說完了百度地圖的使用，簡單的概括了百度地圖對API的調用方法已經使用方法，今天開始帶來的是新聞用戶端的使用

飛機直達-->小帥新聞用戶端原始碼下載

首先讓我們先來看看片

對這個用戶端的實現首先要感謝   若水   的無私恭喜，希望大家多多支援若水

首先建立如所展示的工程

接下來就是開啟main.xml檔案進行編輯下面是XML檔案的全部代碼

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@id/main_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"android:background="@drawable/main_background">    <RelativeLayout         android:id="@id/titlebar_layout"        android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/titlebar_background">        <TextView             android:id="@id/titlebar_title"            android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="@string/titlebar_xiaoshuai"    android:textSize="23sp"    android:layout_marginTop="8dp"    android:layout_marginLeft="10dp"            />        <Button             android:id="@id/titlebar_refresh"            android:layout_width="wrap_content"    android:layout_height="wrap_content"            android:background="@drawable/titlebar_btn_refresh_selector"            android:layout_alignParentRight="true"            android:layout_marginTop="8dp"            android:layout_marginRight="12dp"            />    </RelativeLayout>    <RelativeLayout         android:id="@id/categorybar_layout"        android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/categorybar_background"    android:layout_marginTop="-16dp">        <HorizontalScrollView             android:id="@id/category_scrollview"        android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="6dp"    android:scrollbars="none"    android:layout_toLeftOf="@id/category_arrow_right"    android:layout_centerVertical="true">            <LinearLayout    android:id="@id/category_layout"    android:layout_width="wrap_content"    android:layout_height="wrap_content"            android:gravity="center_vertical"/>        </HorizontalScrollView>        <Button              android:id="@id/category_arrow_right"         android:layout_width="6dp"     android:layout_height="10dp"     android:background="@drawable/categorybar_right_arrow"     android:layout_alignParentRight="true"             android:layout_marginRight="15dp"             android:gravity="center_vertical"             android:layout_centerVertical="true"/>    </RelativeLayout>    <ListView         android:id="@id/newslist"        android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:listSelector="@drawable/newslist_item_selector"    android:cacheColorHint="#00000000"    android:divider="@drawable/list_separator_line">            </ListView></LinearLayout>

然後就是對  MainActivity.java  檔案進行實現功能 下面是具體代碼

package com.sy.news.activity;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import android.app.Activity;import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.os.Bundle;import android.view.Gravity;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;import android.widget.Button;import android.widget.GridView;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;import android.widget.SimpleAdapter;import com.sy.news.R;import com.sy.news.util.DensityUtil;public class MainActivity extends Activity {//定義category.setColumnWidth的寬度private final int COLUMNWIDTHPX = 130;private int mColumnWidthDip;//定義滾動的距離private final int FLINGVELOCITYPX = 1000;private int mFlingVelocityDip;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        mColumnWidthDip = DensityUtil.px2dip(this, COLUMNWIDTHPX);        mFlingVelocityDip = DensityUtil.px2dip(this, FLINGVELOCITYPX);        //擷取文章的分類資訊        String[] categoryArray = getResources().getStringArray(R.array.categories);        //設定資料配接器        List<HashMap<String,String>> categories = new ArrayList<HashMap<String,String>>();        for(int i = 0;i<categoryArray.length;i++){        HashMap<String,String> hashMap = new HashMap<String, String>();        hashMap.put("category_title", categoryArray[i]);        categories.add(hashMap);        }        SimpleAdapter categoryAdapter = new SimpleAdapter(        this,        categories,         R.layout.category_title,         new String[]{"category_title"},         new int[]{R.id.category_title});        //聲明GridView視圖        GridView category = new GridView(this);        category.setColumnWidth(mColumnWidthDip);        category.setNumColumns(GridView.AUTO_FIT);        //設定對其方式        category.setGravity(Gravity.CENTER);        //指定寬度和高度        int width = mColumnWidthDip * categories.size();        LayoutParams params = new LayoutParams(width,LayoutParams.WRAP_CONTENT);        //對控制項產生作用        category.setLayoutParams(params);        //設定控制項的顏色        category.setSelector(new ColorDrawable(Color.TRANSPARENT));        //傳人資料        category.setAdapter(categoryAdapter);        //去掉滾動到最邊界產生的陰影(沒有效果)        category.setHorizontalFadingEdgeEnabled(false);        //放入介面        LinearLayout categoryLayout = (LinearLayout) findViewById(R.id.category_layout);        categoryLayout.addView(category);        //為Button添加事件讓其可以控制導覽列        final HorizontalScrollView categoryScrollview = (HorizontalScrollView) findViewById(R.id.category_scrollview);        Button categoryArrowRight = (Button) findViewById(R.id.category_arrow_right);        categoryArrowRight.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {categoryScrollview.fling(mFlingVelocityDip);}});    }}

還需要用到一個類是對像素跟DP之間來轉換

package com.sy.news.util; import android.content.Context;public class DensityUtil{/** * 根據手機的解析度從 dp 的單位 轉成為 px(像素) */public static int dip2px(Context context, float dpValue){final float scale = context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}/** * 根據手機的解析度從 px(像素) 的單位 轉成為 dp */public static int px2dip(Context context, float pxValue){final float scale = context.getResources().getDisplayMetrics().density;return (int) (pxValue / scale + 0.5f);}}

這樣，通過上面的步驟，新聞用戶端的基本步驟就完成了，下面送上剛剛編寫完成的代碼