安卓市场--首页2

在《首页1》这篇文章中，我们讲述了在首页中加入一个自定义的广告栏，下面我们将继续完成首页内容的添加。

在我们在想法中就是在广告栏下面是一个ListView用于显示比较新的或者是下载量比较高的app。下面我们就来做这一项工作。

1：首先，我们需要在activity_home.xml文件中添加如一个ListView作为显示列表。该ListView的布局就是在广告栏的下面即可。

我们来看一下代码:

    <RelativeLayout             android:id="@+id/rl_apps"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@id/rl_advers">            <ListView                android:id="@+id/lv_apps"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginBottom="2dp"                android:layout_marginTop="4dp"                android:background="@drawable/shape_rectangle"                android:cacheColorHint="#00000000"                android:divider="@drawable/line_bg_blue"                android:dividerHeight="1.0dp"                android:fadingEdge="vertical"                android:listSelector="@drawable/listview_item_bg"                android:scrollbarStyle="outsideOverlay" >            </ListView>        </RelativeLayout>

其中就几个属性，我来说一下ListView中的一些属性问题。

• 1：cacheColorHint：祛除ListView的拖动背景色。当我们使用自定义的ListView的时候，特别容易出现这个问题。当我们在拖动ListView滑动的时候，背景就会出现黑色。
• 2：divider：指定ListView中的item之间的分割线
• 3：dividerHeight：设置分割线的宽度
• 4：fadingEdge：设置后上面和下面有黑色的阴影
• 5：listSelector：设置ListView中的item被选中之后的图像
• 6:scrollbarStyle：设置滚动条和分割线的覆盖问题

2：在这里我们重点看的就是shape_rectangle样式，这个是我们定义的一个圆角的drawable,其实xml内部节点为shape。这个其实在上面的博客中已经说到了，在这里我在上一次关于这个的代码：

shape_rectangle.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true" android:drawable="@drawable/round_rectangle_bg_pressed" /> <!-- pressed -->      <item android:state_focused="true" android:drawable="@drawable/round_rectangle_bg_pressed" /> <!-- focused -->      <item android:state_selected="true" android:drawable="@drawable/round_rectangle_bg_pressed" /> <!-- selected -->      <item android:drawable="@drawable/round_rectangle_bg" /> <!-- default bg_list_item_normal -->      </selector>  

round_rectangle_bg_pressed.xml

    <?xml version="1.0" encoding="utf-8"?>      <shape        xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="rectangle"        ><!-- android:shape="" 表示是圆角矩形还是椭圆等等 -->          <solid android:color="#ffffff"/> <!-- 背景颜色 -->          <!-- padding 表示内部空间距离背景图片内部边距 的距离 -->           <padding android:left="10dp" android:top="5dp"                   android:right="10dp" android:bottom="5dp" />           <stroke android:width="1dp" android:color="#cecece"/> <!-- 图片边框属性 -->            <corners android:radius="10dp" /> <!-- 圆角的程度 -->          <gradient android:startColor="#ffffff" android:centerColor="#ffffff"               android:endColor="#ffffff" android:type="linear" android:angle="90"               android:centerX="0.5" android:centerY="0.5" />         </shape>  

round_rectangle_bg.xml

    <?xml version="1.0" encoding="utf-8"?>    <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="rectangle" >        <!-- android:shape="" 表示是圆角矩形还是椭圆等等 -->        <solid android:color="#ffffff" />        <!-- 背景颜色 -->        <!-- padding 表示内部空间距离背景图片内部边距 的距离 -->        <padding            android:bottom="5dp"            android:left="10dp"            android:right="10dp"            android:top="5dp" />        <stroke            android:width="1dp"            android:color="#cecece" />        <!-- 图片边框属性 -->        <corners android:radius="10dp" />        <!-- 圆角的程度 -->        <gradient            android:angle="90"            android:centerColor="#ffffff"            android:centerX="0.5"            android:centerY="0.5"            android:endColor="#ffffff"            android:startColor="#ffffff"            android:type="linear" />    </shape>

好了，到了这一步，我们的ListView也定义好了，下面我们该定义我们的ListView Item和相应的Adapter了。

3：定义ListView Item

在我们的res/layout文件夹下面创建lv_app_item.xml，其中根布局选择RelativeLayout。

我们看一下我们的代码是如何定义的。

    <?xml version="1.0" encoding="utf-8"?>    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent" >        <RelativeLayout            android:id="@+id/rl_app_item"            android:layout_width="wrap_content"            android:layout_height="wrap_content"             android:layout_marginTop="2dp"            android:layout_marginBottom="2dp">            <!--            <com.android.volley.toolbox.NetworkImageView                android:id="@+id/app_image"                android:layout_width="60dp"                android:layout_height="60dp"                android:layout_marginLeft="10dip"                android:background="@drawable/noimage" />            -->            <ImageView                android:id="@+id/app_image"                android:layout_width="60dp"                android:layout_height="60dp"                android:layout_marginLeft="5dip"                android:background="@drawable/icon4" />            <RelativeLayout                android:id="@+id/rl_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="8dp"                android:layout_toRightOf="@id/app_image" >                <TextView                    android:id="@+id/tv_app_name"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:ellipsize="end"                    android:singleLine="true"                    android:text="@string/tv_name"                    android:textColor="@color/black"                    android:textSize="20sp" />                <TextView                    android:id="@+id/tv_down_count"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_below="@id/tv_app_name"                    android:layout_marginTop="2dp"                    android:text="6万次下载"                    android:textSize="12sp" />                <TextView                    android:id="@+id/tv_app_size"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_below="@id/tv_app_name"                    android:layout_marginLeft="8dp"                    android:layout_marginTop="2dp"                    android:layout_toRightOf="@id/tv_down_count"                    android:text="3.62M"                    android:textSize="12sp" />                <TextView                    android:id="@+id/tv_brief"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_below="@id/tv_app_size"                    android:layout_marginTop="2dp"                    android:ellipsize="end"                    android:singleLine="true"                    android:text="手游福利平台，更有海量精品游戏奥"                    android:textSize="10sp" >                </TextView>            </RelativeLayout>            <ImageView                android:id="@+id/iv_download"                android:layout_width="40dp"                android:layout_height="40dp"                android:layout_alignParentRight="true"                android:layout_centerVertical="true"                android:layout_marginRight="5dip"                android:background="@drawable/btn_icon_download_ring" />        </RelativeLayout>    </RelativeLayout>

我们看一下item的截图：

4:创建JavaBean类，保存app信息
为了能够在Adapter中显示app的信息，我们需要创建一个能够保存每一个app信息的类，我们称之为JavaBean。

在包com.sdu.beans下创建一个名为”AppBriefBean.java”文件，其中包含着app的一些信息以及对应的getters和setters方法。

我们来看一下:

    package com.sdu.beans;    public class AppBriefBean {        private String appID; /* app的唯一标识 */        private String appIconAdd; /* app的图标的地址 */        private String appName; /* app的名称 */        private String appDownCount; /* app的下载次数 */        private String appSize; /* app的大小 */        private String briefInfo; /* app的简介 */        private String appAddress; /* app的下载地址 */        public AppBriefBean(String appID, String appIconAdd, String appName,                String appDownCount, String appSize, String briefInfo,                String appAddress) {            super();            this.appID = appID;            this.appIconAdd = appIconAdd;            this.appName = appName;            this.appDownCount = appDownCount;            this.appSize = appSize;            this.briefInfo = briefInfo;            this.appAddress = appAddress;        }        public String getAppID() {            return appID;        }        public void setAppID(String appID) {            this.appID = appID;        }        public String getAppIconAdd() {            return appIconAdd;        }        public void setAppIconAdd(String appIconAdd) {            this.appIconAdd = appIconAdd;        }        public String getAppName() {            return appName;        }        public void setAppName(String appName) {            this.appName = appName;        }        public String getAppDownCount() {            return appDownCount;        }        public void setAppDownCount(String appDownCount) {            this.appDownCount = appDownCount;        }        public String getAppSize() {            return appSize;        }        public void setAppSize(String appSize) {            this.appSize = appSize;        }        public String getBriefInfo() {            return briefInfo;        }        public void setBriefInfo(String briefInfo) {            this.briefInfo = briefInfo;        }        public String getAppAddress() {            return appAddress;        }        public void setAppAddress(String appAddress) {            this.appAddress = appAddress;        }    }

5：编写Adapter

在包com.sdu.adapters中创建一个明为”AppListAdapter.java”文件，该类继承自BaseAdapter。

按照创建Adapter的流程,首先我们需要有一个容器来保存每一个app的信息，我们这里使用ArrayList.

    /* 储存app信息的数据 */    private ArrayList<AppBriefBean> appList;

然后再根据LayoutInfalter和Context获取对应的组件进行赋值即可。我们看一下AppListAdapter.java的完整程序。

    package com.sdu.adapters;    import java.util.ArrayList;    import com.sdu.androidmarket.R;    import com.sdu.beans.AppBriefBean;    import android.content.Context;    import android.net.Uri;    import android.view.LayoutInflater;    import android.view.View;    import android.view.ViewGroup;    import android.widget.BaseAdapter;    import android.widget.ImageView;    import android.widget.TextView;    public class AppListAdapter extends BaseAdapter{        /* 储存app信息的数据 */        private ArrayList<AppBriefBean> appList;        private LayoutInflater inflate;        public AppListAdapter(ArrayList<AppBriefBean> appList,Context context){            this.appList = appList;            this.inflate = LayoutInflater.from(context);        }        @Override        public int getCount() {            // TODO Auto-generated method stub            return appList == null?0:appList.size();        }        @Override        public Object getItem(int position) {            // TODO Auto-generated method stub            return appList.get(position);        }        @Override        public long getItemId(int position) {            // TODO Auto-generated method stub            return position;        }        @Override        public View getView(int position, View convertView, ViewGroup parent) {            // TODO Auto-generated method stub            Holder holder;            if(convertView == null){                holder = new Holder();                convertView = inflate.inflate(R.layout.lv_app_item, null);                holder.app_image = (ImageView)convertView.findViewById(R.id.app_image);                holder.tv_app_name = (TextView)convertView.findViewById(R.id.tv_app_name);                holder.tv_down_count = (TextView)convertView.findViewById(R.id.tv_down_count);                holder.tv_app_size = (TextView)convertView.findViewById(R.id.tv_app_size);                holder.tv_brief = (TextView)convertView.findViewById(R.id.tv_brief);                convertView.setTag(holder);            }else{                holder = (Holder)convertView.getTag();            }            if(appList.get(position).getAppIconAdd() == null || appList.get(position).getAppIconAdd().equals("")){            }else{                holder.app_image.setImageURI(Uri.parse(appList.get(position).getAppIconAdd()));            }            if(appList.get(position).getAppName() != null)                holder.tv_app_name.setText(appList.get(position).getAppName());            if(appList.get(position).getAppDownCount() != null)                holder.tv_down_count.setText(appList.get(position).getAppDownCount()+"次下载");            if(appList.get(position).getAppSize() != null)                holder.tv_app_size.setText(appList.get(position).getAppSize());            if(appList.get(position).getBriefInfo() != null)                holder.tv_brief.setText(appList.get(position).getBriefInfo());            return convertView;        }        class Holder{            ImageView app_image;            TextView tv_app_name;            TextView tv_down_count;            TextView tv_app_size;            TextView tv_brief;        }    }

6：初始化ListView（使用测试数据）

好了，Adapter也做好了，现在我们测试一下呗。在HomeActivity中使用测试数据进行对ListView的初始化，我们先来看一下实现代码：

    package com.sdu.activities;    import java.util.ArrayList;    import net.tsz.afinal.FinalBitmap;    import com.sdu.adapters.AppListAdapter;    import com.sdu.androidmarket.R;    import com.sdu.beans.AppBriefBean;    import com.sdu.ui.AdGallery;    import com.sdu.utils.AppLog;    import android.content.Intent;    import android.view.View;    import android.widget.AdapterView;    import android.widget.ImageView;    import android.widget.LinearLayout;    import android.widget.ListView;    import android.widget.TextView;    import android.view.Window;    public class HomeActivity extends BaseActivity {        private TextView tv_search;        private TextView tv_contact;        private ImageView iv_dia;        private AdGallery app_advers;        private LinearLayout ovalLayout; // 圆点容器        /** 图片id的数组,本地测试用 */        private int[] imageId = new int[] { R.drawable.test, R.drawable.test,                R.drawable.test, R.drawable.test };        /** 图片网络路径数组 */        private String[] mris = {                "http://img.my.csdn.net/uploads/201312/14/1386989803_3335.PNG",                "http://img.my.csdn.net/uploads/201312/14/1386989613_6900.jpg",                "http://img.my.csdn.net/uploads/201312/14/1386989802_7236.PNG" };        /* 显示app的ListView */        private ListView lv_apps;        /* app ListView的适配器 */        private AppListAdapter appsAdapter;        /* 存放数据的array */        private ArrayList<AppBriefBean> appsList = new ArrayList<AppBriefBean>();        @Override        public void initWidget() {            requestWindowFeature(Window.FEATURE_NO_TITLE);            setContentView(R.layout.activity_home);            FinalBitmap.create(this); // android 框架 这里用于加载网络图片             tv_search = (TextView)findViewById(R.id.tv_search);            tv_contact = (TextView)findViewById(R.id.tv_contact);            iv_dia = (ImageView)findViewById(R.id.iv_dia);            lv_apps = (ListView)findViewById(R.id.lv_apps);            /**测试一下 */            appsList.add(new AppBriefBean("1", null, "360游戏大厅", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "小时代", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "360免费wifi", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "全民2048", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "58同城", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "开心消消乐", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "看点", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsList.add(new AppBriefBean("1", null, "神庙逃亡2", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));            appsAdapter = new AppListAdapter(appsList, getApplicationContext());            lv_apps.setAdapter(appsAdapter);            tv_search.setOnClickListener(this);            tv_contact.setOnClickListener(this);            iv_dia.setOnClickListener(this);            app_advers = (AdGallery)findViewById(R.id.app_advers);            ovalLayout = (LinearLayout) findViewById(R.id.ovalLayout);// 获取圆点容器            // 第二和第三参数 2选1 ,参数2为 图片网络路径数组 ,参数3为图片id的数组,本地测试用 ,2个参数都有优先采用 参数2            app_advers.start(this, mris, imageId, 3000, ovalLayout,                            R.drawable.dot_focused, R.drawable.dot_normal);            app_advers.setAdversOnItemClickListener(new AdGallery.AdversOnItemClickListener() {                public void onItemClick(int curIndex) {                    AppLog.error("点击的图片下标为:" + curIndex);                    // System.out.println(curIndex);                }            });            lv_apps.setOnItemClickListener(new AdapterView.OnItemClickListener() {                @Override                public void onItemClick(AdapterView<?> parent, View view,                        int position, long id) {                    // TODO Auto-generated method stub                }            });        }        @Override        public void widgetClick(View v) {            Intent intent = null;             switch(v.getId()){            case R.id.tv_search:                intent = new Intent(HomeActivity.this,SearchActivity.class);                startActivity(intent);                break;            case R.id.tv_contact:                intent = new Intent(HomeActivity.this,MeActivity.class);                startActivity(intent);                break;            case R.id.iv_dia:                intent = new Intent(HomeActivity.this,DiacodeActivity.class);                startActivity(intent);                break;            }        }    }

好了，做到这里，我们的首页就算是完成了，我们来看一下我们的效果截图吧！