0%

自定义控件-仿网易新闻专题跳转

发表于 分类于 阅读次数： Valine： 11k 10 分钟

前言

不知道大家用过网易新闻没？点击进入到专题中，就有可能出现如下图所示的导航栏，点击任意一个导航块，就会自动跳转到相应的地方，这是怎么实现的呢？

图1

分析

我们先把功能一个一个拆开，上方的导航块可以使用gridview来实现，而下方的最新消息、独家策划等和新闻都当作一个item放在listview中，点击了gridview的相应位置A，就调用listview的setSelection方法跳转到listview对应位置即可

实现

为了实现listview中可以展示不同item，提高代码复用，我们把最新消息、独家策划等抽象成GroupView、而把新闻抽象成ChildView，用GroupAdapter来实现展示展示逻辑，并提供两个抽象方法getChildView和getGroupView给子类去实现。子类不需要关系具体的位置计算，只需要覆写getChildView和getGroupView两个方法即可。T表示groupview的数据类型，S表示childview的数据类型。

GroupAdapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 package com.github.jason.demos;
import android.util.Pair;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by jason on 2016/12/25.
 */
public abstract class GroupAdapter<T, S> extends BaseAdapter {
    private List<Pair<T, List<S>>> mList = new ArrayList<>();
    private List<Integer> mGroupPositions = new ArrayList<>();
    public GroupAdapter(List<Pair<T, List<S>>> list) {
            mList = list ;
        calcGroupPositions();
    }
    protected final void setList(List<Pair<T, List<S>>> list, boolean noitfy){
        if(mList != null){
            mList = null;
        }
        mList = list;
        calcGroupPositions();
        if(noitfy){
            notifyDataSetChanged();
        }
    }
    abstract public View getChildView(int listPosition, int childPosition, int groupPosition , View convertView, ViewGroup parent);
    abstract public View getGroupView(int listPosition, int groupPosition, View convertView, ViewGroup parent);
    @Override
    public int getItemViewType(int position) {
        return isGroup(position) ? 1 : 0;
    }
    @Override
    public int getViewTypeCount() {
        return 2;
    }
    @Override
    public int getCount() {
        return calcCount();
    }
    @Override
    public final S getItem(int position) {
        if (isGroup(position)) {
            return null;
        }
        int group = getGroupPosition(position);
        int child = getChildPosition(position);
        return getChild(group,child);
    }
    @Override
    public final long getItemId(int position) {
        return 0;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (isGroup(position)) {
            return getGroupView(position, getGroupPosition(position), convertView, parent);
        } else {
            return getChildView(position, getChildPosition(position), getGroupPosition(position), convertView, parent);
        }
    }
    public final S getChild(int groupPosition, int childPosition) {
        if (groupPosition < 0 || groupPosition>=mList.size()) {
            return null;
        }
        if (childPosition < 0 || childPosition >= mList.get(groupPosition).second.size()) {
            return null;
        }
        return mList.get(groupPosition).second.get(childPosition);
    }
    public final T getGroup(int groupPosition) {
        if (groupPosition < 0 || groupPosition>=mList.size()) {
            return null;
        }
        return mList.get(groupPosition).first;
    }
    public final boolean isGroup(int position) {
        int N = mGroupPositions.size();
        for (int i=0 ; i<N ; i++) {
            if (position == mGroupPositions.get(i))
                return true;
        }
        return false;
    }
    public final int getGroupPosition(int position) {
        int N = mGroupPositions.size();
        for (int i=0 ; i<N ; i++) {
            if (position < mGroupPositions.get(i))
                return i-1;
        }
        return N-1;
    }
    public final int getPositionByGroupPosition(int groupPosition) {
        if (groupPosition >= mList.size()) {
            return 0;
        }
        return mGroupPositions.get(groupPosition);
    }
    public final int getChildPosition(int position) {
        int group = -1;
        int N = mGroupPositions.size();
        for (int i=0 ; i<N ; i++) {
            if (position < mGroupPositions.get(i)) {
                group =  mGroupPositions.get(i-1);
                break;
            }
        }
        if (group == -1) {
            group = mGroupPositions.get(N-1);
        }
        return position - group - 1;
    }
    private void calcGroupPositions() {
        int len = mList.size();
        int total = 0;
        mGroupPositions.clear();
        for (int i = 0 ; i<len ; i++) {
            Pair<T, List<S>> pair = mList.get(i);
            mGroupPositions.add(total);
            total += pair.second.size()+1;
        }
    }
    private int calcCount() {
        return mGroupPositions.get(mGroupPositions.size() - 1 ) + mList.get(mList.size()-1).second.size();
    }
}

GroupAdapterEx类很简单，直接覆写getChildView和getGroupView。注意：这里为了简单，没有用ViewHolder进行优化，用到项目中最好使用ViewHolder进行优化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 package com.github.jason.demos;
import android.content.Context;
import android.util.Pair;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.List;
/**
 * Created by jason on 2016/12/25.
 */
public class GroupAdapterEx extends GroupAdapter<String, String> {
    private Context mContext;
    public GroupAdapterEx(Context context, List<Pair<String, List<String>>> list) {
        super(list);
        mContext = context;
    }
    @Override
    public View getChildView(int listPosition, int childPosition, int groupPosition, View convertView, ViewGroup parent) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.list_item_2, parent, false);
        TextView tv = (TextView) view.findViewById(R.id.son);
        String child = getChild(groupPosition, childPosition);
        tv.setText(child);
        return view;
    }
    @Override
    public View getGroupView(int listPosition, int groupPosition, View convertView, ViewGroup parent) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.list_item_1, parent, false);
        TextView tv = (TextView) view.findViewById(R.id.father);
        String group = getGroup(groupPosition);
        tv.setText(group);
        return view;
    }
}

布局文件
如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <!--list_item.xml-->
 
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>
 <!-- list_item_1.xml-->
 
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/father"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="left"
        android:text="我是你爷爷"/>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 <!-- list_item_2.xml-->
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/son"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="孙子在这里"/>
</LinearLayout>
 <!-- activity_main_2.xml-->
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridView
        android:id="@+id/nav_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <View
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@color/colorAccent"/>
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

MainActivity类
如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
package com.github.jason.demos;
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Pair;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
    private final List<String> mNaviDataList = new ArrayList<>();
    private final List<Pair<String, List<String>>> mGroupList = new ArrayList<>();
    private ListView mDataListView;
    private GridView mNavListView;
    private GroupAdapterEx mDataAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_2);
        mDataListView = (ListView) findViewById(R.id.list);
        makeFakeData();
        mDataAdapter = new GroupAdapterEx(this, mGroupList);
        mDataListView.setAdapter(mDataAdapter);
        mNavListView = (GridView) findViewById(R.id.nav_list);
        mNavListView.setNumColumns(4);
        mNavListView.setAdapter(new MyAdapter(this, mNaviDataList));
        mNavListView.setOnItemClickListener(this);
    }
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        if (mDataListView != null && mDataAdapter != null)
            mDataListView.setSelection(mDataAdapter.getPositionByGroupPosition(position));
    }
    private void makeFakeData() {
        for (int i=0 ; i<6 ; i++) {
            String title = "father" + i ;
            mNaviDataList.add(title);
            List<String> beanList = genBean(i);
            Pair<String, List<String>> pair = new Pair<>(title, beanList);
            mGroupList.add(pair);
        }
    }
    private List<String> genBean(int group) {
        List<String> list = new ArrayList<>();
        for (int i=0 ; i<6 ; i++) {
            list.add("son"+group+i);
        }
        return list;
    }
    private class MyAdapter extends BaseAdapter {
        private Context mContext;
        private List<String> mList ;
        public MyAdapter(Context context, List<String> list) {
            mContext = context;
            mList = list;
        }
        @Override
        public int getCount() {
            return mList.size();
        }
        @Override
        public Object getItem(int position) {
            return mList.get(position);
        }
        @Override
        public long getItemId(int position) {
            return position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false);
            TextView tv = (TextView) view.findViewById(R.id.text);
            tv.setText(mList.get(position));
            return view;
        }
    }
}

效果

最终的实现效果是粗糙了一点，但是基本功能实现了(点击就能跳转到相应的位置)。想要做得更美观，只需把xml布局文件改改即可。

图2