007 走下移动开发之安卓项目实战(小帅新闻:新闻主界面布局 以及导航条的实现)

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() {
			
			@Override
			public 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);
	}

}

这样，通过上面的步骤，新闻客户端的基本步骤就完成了，下面送上刚刚编写完成的代码