在《首页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;
}
}
}
好了，做到这里，我们的首页就算是完成了，我们来看一下我们的效果截图吧！
版权声明：您好，转载请留下本人博客的地址，谢谢
时间： 2024-12-07 08:06:24