android 仿微信demo————注册功能实现（移动端）
android 仿微信demo————注册功能实现（服务端）
android 仿微信demo————登录功能实现（移动端）
android 仿微信demo————登录功能实现（服务端）
android 仿微信demo————微信消息界面实现（移动端）
android 仿微信demo————微信消息界面实现（服务端）
android 仿微信demo————微信通讯录界面功能实现（移动端，服务端）
android 仿微信demo————微信顶部操作栏界面实现
android 仿微信demo————微信顶部操作栏搜索按钮实现（查询通讯录好友功能）
android 仿微信demo————微信顶部操作栏加号按钮实现（弹出子菜单）
在前面的文章里实现了微信消息，通讯录界面，它们的都需要在服务器中动态获取，而这一篇主要实现发现界面的实现，由于数据不需要从服务器中获取（静态的），所有实现相对比较简单
微信发现界面实现
微信发现界面跟之前的两个界面是一样的都是listview(微信消息，通讯录界面），那么既然是listview,无非就是给listview一个布局，然后再fragmeng中初始化数据，并设置一个适配器，但是我们观察微信，会发现微信发现界面有不同的分割线，如下
那么要怎么实现呢？很简单，细的分割线我们可以再ListView组件上添加分割线的属性来指定自定义的分割线，粗的分割条只需再ListView对应的布局上添加一个View组件来填充即可，那么问题来了，我们怎么知道要用细的，还是粗的分割线呢？可以在适配器上进行判断
在find_fragment布局文件添加如下代码
find_fragment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E0E0E0">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:divider="@drawable/find_list_divider_line"
android:dividerHeight="1.5px" />
</LinearLayout>
上面代码在fragment布局中添加一个listview，并给listview设置自定义的分割线，下面给出
创建自定义分割线find_list_divider_line.xml
find_list_divider_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="55dp"
android:right="0dp">
<shape android:shape="rectangle" >
<solid android:color="#33000000" />
</shape>
</item>
</layer-list>
layer-list文件创建在之前的文章已经演示过，就不再演示了
创建listview对应的item布局
find_item.xml
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/pic"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:padding="10dp"
android:textColor="#336598"
android:textSize="16sp" />
<View
android:id="@+id/fill"
android:layout_width="180dp"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/pic1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/tab_settings_pressed" />
</LinearLayout>
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="#E0E0E0" />
<View
android:id="@+id/divider1"
android:layout_width="match_parent"
android:layout_height="63dp"
android:background="#E0E0E0" />
</LinearLayout>
上面布局除了包括每一个列表需要的图片，文字组件外，还包括了View组件实现不同的分割线（在适配器进行判断该不该显示）
修改fragment.java代码
FindFragment.xml
package com.example.wxchatdemo;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import com.example.wxchatdemo.adapter.findSortAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class FindFragment extends Fragment {
/* 声明组件*/
private ListView listView;
//定义一个map集合存放数据
private List<Map<String,String>> list = new ArrayList<>();
//准备图片
private int[] pic = new int[]{
R.drawable.friend_img,R.drawable.video_img,
R.drawable.scan_img,R.drawable.shark_img,
R.drawable.look_img,R.drawable.search_img,
R.drawable.direct_seeding_img,R.drawable.shopping_img,
R.drawable.game_img,R.drawable.small_routine_img,
};
//准备文字
private String data[] =new String[]
{"朋友圈 ","视频号 " ,"扫一扫 ",
"摇一摇 ","看一看 " ,"搜一搜 ",
"直播和附近","购物 ","游戏 ","小程序 "};
//准备图片
private int[] pic1 = new int[]{
R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,
R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,R.drawable.tab_img,
R.drawable.tab_img,R.drawable.tab_img
};
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.find_fragment, container, false);
/*初始化组件*/
listView = (ListView) view.findViewById(R.id.listView);
//初始化数据
initData();
/*创建自定义适配器，并设置给listview*/
findSortAdapter adapter = new findSortAdapter(getActivity().getApplicationContext(), list);
listView.setAdapter(adapter);
return view;
}
private void initData() {
for(int i=0;i<data.length;i++){
Map<String,String> map = new HashMap<>();
map.put("pic",String.valueOf(pic[i]));
map.put("title",data[i]);
map.put("pic1",String.valueOf(pic1[i]));
list.add(map);//将map放到list集合中
}
}
}
上面代码主要就是准备图片和文字，并进行初始化组件，然后把图片和文字封装在集合里传给适配器再设置给listview
在上面说过，显示不同分割线是在适配器上进行判断的，所有我们要自定义一个适配器并继承BaseAdapter
创建自定义适配器findSortAdapter.java
findSortAdapter.java
package com.example.wxchatdemo.adapter;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.wxchatdemo.R;
import java.util.List;
import java.util.Map;
public class findSortAdapter extends BaseAdapter{
private ViewHolder viewHolder;
private List<Map<String, String>> data = null;
private Context mContext;
public findSortAdapter(Context mContext, List<Map<String, String>> data) {
this.mContext = mContext;
this.data = data;
}
public int getCount() {
return this.data.size();
}
public Object getItem(int position) {
return data.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(final int position, View view, ViewGroup arg2) {
if (view == null) {
viewHolder = new ViewHolder();
//获取listview对应的item布局
view = LayoutInflater.from(mContext).inflate(R.layout.find_item, null);
//初始化组件
viewHolder.pic = (ImageView) view.findViewById(R.id.pic);
viewHolder.title = (TextView) view.findViewById(R.id.title);
viewHolder.pic1 = (ImageView) view.findViewById(R.id.pic1);
viewHolder.divider = (View) view.findViewById(R.id.divider);
viewHolder.divider1 = (View) view.findViewById(R.id.divider1);
view.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) view.getTag();
}
if (position == 0 || position == 1 || position == 3 || position == 5 ||
position == 6 || position == 8) {
Map<String, String> map = data.get(position);
viewHolder.pic.setImageResource(Integer.parseInt(map.get("pic")));
viewHolder.title.setText(map.get("title"));
viewHolder.pic1.setImageResource(Integer.parseInt(map.get("pic1")));
viewHolder.divider.setVisibility(View.VISIBLE);
viewHolder.divider1.setVisibility(View.GONE);
}else {
if (position == 9) {
Map<String, String> map = data.get(position);
viewHolder.pic.setImageResource(Integer.parseInt(map.get("pic")));
viewHolder.title.setText(map.get("title"));
viewHolder.pic1.setImageResource(Integer.parseInt(map.get("pic1")));
viewHolder.divider.setVisibility(View.GONE);
viewHolder.divider1.setVisibility(View.VISIBLE);
}else {
Map<String, String> map = data.get(position);
viewHolder.pic.setImageResource(Integer.parseInt(map.get("pic")));
viewHolder.title.setText(map.get("title"));
viewHolder.pic1.setImageResource(Integer.parseInt(map.get("pic1")));
viewHolder.divider.setVisibility(View.GONE);
viewHolder.divider1.setVisibility(View.GONE);
}
}
return view;
}
final static class ViewHolder {
ImageView pic;
TextView title;
ImageView pic1;
View divider;
View divider1;
}
}
测试
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
