仿知乎日报第七篇：为菜单区加载布局以及加载数据

一.我们已经把内容区的布局讲完了，具体为这个布局加载数据后面再讲。现在我们先讲一下给菜单区（LeftFragment）加载布局，并且加载数据。因为相较内容区，菜单区的布局，加载都要简单些。

1.先看看具体的效果：



这个结构很简单，整个一个LinearLayout，上面也是一个LinearLayout，里面是一个ImageView加上一个TextView，下面就是一个ListView。所以直接看代码吧：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/ll_left_fragement_base_home"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="5dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:src="@drawable/home" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="首页"
android:textColor="#3CB371"
android:textSize="20sp"/>
</LinearLayout>

<ListView
android:id="@+id/lv_left_fragment_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
//ListView选中时的背景色
android:listSelector="#44008B00"
//不要分割线
android:divider="@null">
</ListView>

</LinearLayout>

2.这里有个ListView，所以呢，我们当然要为它的item创建布局

效果：



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:paddingBottom="20dp" >

<TextView
android:id="@+id/tv_left_fragment_list_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="日常心理学"
android:textSize="18sp"
android:layout_marginLeft="20dp"/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu_arrow"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
/>

</RelativeLayout>

上面布局很简单，只有一个TextView，一个ImageView

二.现在我们要在代码中加载布局了

public class LeftFragment extends BaseFragment {

private View mRoot;
private LinearLayout mLlHome;
private ListView mLvContent;
// ListView的数据
private String[] mDatas = new String[] { "日常心理学", "用户推荐日报", "电影日报",
"不许无聊", "设计日报", "大公司日报", "财经日报", "互联网安全", "开始游戏", "音乐日报", "动漫日报",
"体育日报" };

@Override
protected View initView() {
// 加载布局，以及拿到布局中的控件
mRoot = View.inflate(mainActivity, R.layout.left_fragent_base, null);
mLlHome = (LinearLayout) mRoot
.findViewById(R.id.ll_left_fragement_base_home);
mLvContent = (ListView) mRoot
.findViewById(R.id.lv_left_fragment_list_view);

return mRoot;
}

@Override
protected void initData() {
super.initData();

MyAdapter adapter = new MyAdapter();
// 为ListView设置Adapter
mLvContent.setAdapter(adapter);

}

private class MyAdapter extends BaseAdapter {

/*
* 返回数据的个数
*/
@Override
public int getCount() {
return mDatas.length;
}

@Override
public Object getItem(int position) {
// TODO自动生成的方法存根
return null;
}

@Override
public long getItemId(int position) {
// TODO自动生成的方法存根
return 0;
}

@Override
public View getView(int position, View convertView, ViewGroupparent) {
ViewHolder viewHolder;
if (convertView == null) {
// 1.加载ListView各个item的布局
convertView = View.inflate(mainActivity,
R.layout.left_fragment_list_item, null);
viewHolder = new ViewHolder();
// 2.拿到item布局中TextView
viewHolder.tvTitle = (TextView) convertView
.findViewById(R.id.tv_left_fragment_list_title);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
// 3.为TextView设置数据
viewHolder.tvTitle.setText(mDatas[position]);

return convertView;
}

}

private class ViewHolder {
TextView tvTitle;
}

}

上面虽然代码多，但是逻辑很简单：

1）将布局加载进来

2）用数据源来为ListView创建一个Adapter

2）为ListView设置Adapter