android 仿微信demo————微信发现界面实现
以往文章android 仿微信demo————微信启动页实现android 仿微信demo————注册功能实现(移动端)android 仿微信demo————注册功能实现(服务端)android 仿微信demo————登录功能实现(移动端)android 仿微信demo————登录功能实现(服务端)android 仿微信demo————微信主界面功能实现android 仿微信demo————微信消
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;
}
}
测试
更多推荐
所有评论(0)