Fork me on GitHub

Android应用分类订阅功能（新闻个性化分类订阅）

字数统计: 2.3k字   |   阅读时长≈ 10分

title: 小白也能学会的Android应用分类订阅功能（新闻个性化分类订阅），学不会你打我！

相信小伙伴们都使用过分类订阅这个功能，像CSDN APP的分类订阅、还有各种新闻的个性化分类订阅，今天就来实现它！具体实现功能如下：

  • 长按进入可编辑模式（可编辑，并且分类框右边出现一个加（减）图标）
  • 编辑模式下可以通过点击分类进行订阅（或取消订阅），并且所有分类有抖动效果
  • 点击按钮退出编辑模式（也可以改成 退出当前页面 或者 其他事件）
  • 退出编辑模式的同时会保存当前订阅状态（下次进入页面时会显示上次修改后的状态）

温馨提示：如果ListView、GridView、RecycleView一个都不会的话建议先去学一个再来学习这个，会一个都行

话不多说先上效果图！

分类订阅

首先讲一下实现功能的大致思路：实现这个订阅功能主要是在于实现两个GridView（也可以用ListView或者Recycle，这里演示GridView）的点击功能，首先是长按进入编辑模式，利用长按监听对两个GridView设置右上角小图标以及抖动，然后是GridView的子项点击事件的监听，点击其中一个的时候，先把这个加到另外那个GridView里面去，然后移除点击的这个，最后点击保存是利用List的size()和for循环来保存当前GridView里面的所有项（算是奇淫技巧吧，只会这样了）！接下来详细讲：

XML布局

布局没啥讲的，就上下两个GridView，然后加了个按钮（简单到没话说）

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
<?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:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20sp"
        android:text="已订阅"
        android:textColor="@color/colorBlack"
        android:textSize="18sp" />

    <GridView
        android:id="@+id/grid_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:numColumns="4" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20sp"
            android:layout_weight="1"
            android:text="待订阅"
            android:textColor="@color/colorBlack"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_ok"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:text="完成"
            android:textSize="12sp" />
    </LinearLayout>
    
    <GridView
        android:id="@+id/grid_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:numColumns="4" />
        
</LinearLayout>
Item的布局（GridView的Item）

这里是一个LinearLayout里面放了一个TextView和一个ImageView然后把它们调整成ImageView重叠在TextView右上角

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
<?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:gravity="center">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <TextView
            android:id="@+id/txv_name"
            android:layout_width="80dp"
            android:layout_height="35dp"
            android:layout_marginTop="7dp"
            android:background="@drawable/txv_stroke"
            android:gravity="center"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/imv_button"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="-10dp"
            android:scaleType="centerCrop" />

    </LinearLayout>
    
</LinearLayout>

Adapter（GridView的适配器）

这里只放上来一个，我写了两个一样的Adapter（只有名字不一样），如果只用一个的话很麻烦，尤其是当更新数据的时候，会出现很多小BUG（亲测），当然你也可以去试试只用一个！

这里主要讲的是那个boolean值的作用，多生成一个构造方法，可以在Activity中通过实例化传入boolean值或者不传入实现是否显示右上角的小图标！（这里是当传入true时就会把小图标显示出来）

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
public class AdapterTopGrid extends BaseAdapter {

    Context mContext;
    List<BeanSubGrid> mList;
    boolean editMode;

    public AdapterTopGrid(Context mContext, List<BeanSubGrid> mList) {
        this.mContext = mContext;
        this.mList = mList;
        notifyDataSetChanged();
    }
    //boolean值是为了让右上角小图标显示出来
    public AdapterTopGrid(Context mContext, List<BeanSubGrid> mList, boolean editMode) {
        this.mContext = mContext;
        this.mList = mList;
        this.editMode = editMode;
        notifyDataSetChanged();
    }

    @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;
    }

    class ViewHolder {
        private TextView mTxvName;
        private ImageView mImvButton;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        ViewHolder viewHolder = new ViewHolder();
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.sub_grid_item, null);
            viewHolder.mTxvName = convertView.findViewById(R.id.txv_name);
            viewHolder.mImvButton = convertView.findViewById(R.id.imv_button);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.mTxvName.setText(mList.get(position).getName());
        //当Activity重新实例化Adapter并且传入true时，才让小图标显示出来
        if (editMode) {
            viewHolder.mImvButton.setImageResource(mList.get(position).getButton());
        }
        return convertView;
    }
}

JAVA后台

在这里首先是判断有没有存过数据，如果没有则使用默认数据（第一次进入软件），然后是GridView的长按事件，重新实例化Adpater，进入编辑模式，接着是GridView的子项点击事件，另一个加上点击的那个，然后移除当前点击的（这里注意先加后移除），然后是按钮的点击事件，利用for循环实现按一定规律以Key-Value的形式用SharePrefences保存数据，并且重新实例化Adapter，让GridView变回默认状态。

然后抖动功能的话，属于可选功能吧，这是做了，不想要的或者想要其他效果的可以选择删掉那几行代码！不会影响其他功能的实现！

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
public class SubActivity extends AppCompatActivity {

    private android.widget.GridView mGridTop;
    private android.widget.Button mBtnOk;
    private android.widget.GridView mGridBottom;
    List<BeanSubGrid> mListTop;
    List<BeanSubGrid> mListBottom;
    BeanSubGrid mBeanSubGrid;
    AdapterTopGrid mAdapterTopGrid;
    AdapterBottomGrid mAdapterBottomGrid;

    private boolean mEditMode;
    private String isEmpty;

    Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.subscription);
        mContext = SubActivity.this;
        mGridTop = findViewById(R.id.grid_top);
        mBtnOk = findViewById(R.id.btn_ok);
        mGridBottom = findViewById(R.id.grid_bottom);

        //数据,此时判断是否存储过数据，没存储过数据就使用默认数据
        isEmpty = (String) PreferencesUtils.get(mContext, "gridTop0", "");
        if (isEmpty.isEmpty()) {
            setDataTop();
        } else {
            mListTop = new ArrayList<>();
            int size = (int) PreferencesUtils.get(mContext, "gridTop", 0);
            for (int i = 0; i < size; i++) {
                String topStr = (String) PreferencesUtils.get(mContext, "gridTop" + i, "");
                mBeanSubGrid = new BeanSubGrid();
                mBeanSubGrid.setButton(R.mipmap.img_cut);
                mBeanSubGrid.setName(topStr);
                mListTop.add(mBeanSubGrid);
            }
        }
        isEmpty = (String) PreferencesUtils.get(mContext, "gridBottom0", "");
        if (isEmpty.isEmpty()) {
            setDataBottom();
        } else {
            mListBottom = new ArrayList<>();
            int size = (int) PreferencesUtils.get(mContext, "gridBottom", 0);
            for (int i = 0; i < size; i++) {
                String bottomStr = (String) PreferencesUtils.get(mContext, "gridBottom" + i, "");
                mBeanSubGrid = new BeanSubGrid();
                mBeanSubGrid.setButton(R.mipmap.img_add);
                mBeanSubGrid.setName(bottomStr);
                mListBottom.add(mBeanSubGrid);
            }
        }

        //进入页面默认显示状态
        defaultGrid();

        //长按以后进入编辑模式
        mGridTop.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                //编辑模式
                longClickGrid();
                //改为return true，防止长按完还会触发点击事件
                return true;
            }
        });
        //两个GeidView的长按事件执行的是一样的
        mGridBottom.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                //编辑模式
                longClickGrid();
                //改为return true，防止长按完还会触发点击事件
                return true;
            }
        });
        
        //点击完成后退出编辑模式
        mBtnOk.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //把boolean值变为false，也就是退出了编辑模式，GridView的子项单击事件不能再执行
                mEditMode = false;
                //默认模式（不显示右上角图标）
                defaultGrid();
                //这里是停止抖动
                AnimationUtils.Translater(mGridTop, 0);
                AnimationUtils.Translater(mGridBottom, 0);

                PreferencesUtils.put(mContext, "gridTop", mListTop.size());
                for (int gridTop = 0; gridTop < mListTop.size(); gridTop++) {
                    PreferencesUtils.put(mContext,"gridTop"+gridTop,mListTop.get(gridTop).getName());
                }
                PreferencesUtils.put(mContext, "gridBottom", mListBottom.size());
                for (int gridBottom = 0; gridBottom < mListBottom.size(); gridBottom++) {
        PreferencesUtils.put(mContext,"gridBottom"+gridBottom,mListBottom.get(gridBottom).getName());
                }
                
            }
        });


        //子项点击事件处理
        mGridTop.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                if (mEditMode) {//判断是否处于编辑模式
                    //先把点击的加到下面
                    mBeanSubGrid = new BeanSubGrid();
                    mBeanSubGrid.setName(mListTop.get(position).getName());
                    mBeanSubGrid.setButton(R.mipmap.img_add);
                    mListBottom.add(mBeanSubGrid);
                    //再把点击的移除
                    mListTop.remove(position);
                    //列表更新  由于两个GridView都发生了改变，所以需要对两个都进行更新
                    mAdapterTopGrid.notifyDataSetChanged();
                    mAdapterBottomGrid.notifyDataSetChanged();
                } else {
                    ToastUtils.Toast(mContext, "请先长按进入编辑模式！");
                }

            }
        });
        mGridBottom.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
 
                if (mEditMode) {//判断是否处于编辑模式
                    //先把点击的加到上面
                    mBeanSubGrid = new BeanSubGrid();
                    mBeanSubGrid.setName(mListBottom.get(position).getName());
                    mBeanSubGrid.setButton(R.mipmap.img_cut);
                    mListTop.add(mBeanSubGrid);
                    //再把点击的移除
                    mListBottom.remove(position);
                    //列表更新 由于两个GridView都发生了改变，所以需要对两个都进行更新
                    mAdapterTopGrid.notifyDataSetChanged();
                    mAdapterBottomGrid.notifyDataSetChanged();
                } else {
                    ToastUtils.Toast(mContext, "请先长按进入编辑模式！");
                }

            }
        });

    }

    //编辑模式
    private void longClickGrid() {
        //boolean值变为true，GridView的子项单击事件可以执行了
        mEditMode = true;
        /**
        * 两个GridView的抖动，我是写在工具类里，这里可以复制出来直接用，根据方法的参数一样传入就行
        public static void Translater(View view, int repeatCount) {
        Animation animation = new TranslateAnimation(0, 1, 0, 1);
        animation.setDuration(200);
        animation.setRepeatCount(repeatCount);
        view.setAnimation(animation);
        }
        */
        AnimationUtils.Translater(mGridTop, -1);
        AnimationUtils.Translater(mGridBottom, -1);
        
        mAdapterTopGrid = new AdapterTopGrid(mContext, mListTop, true);
        mGridTop.setAdapter(mAdapterTopGrid);

        mAdapterBottomGrid = new AdapterBottomGrid(mContext, mListBottom, true);
        mGridBottom.setAdapter(mAdapterBottomGrid);
    }

    //默认模式
    private void defaultGrid() {
        mAdapterTopGrid = new AdapterTopGrid(mContext, mListTop);
        mGridTop.setAdapter(mAdapterTopGrid);

        mAdapterBottomGrid = new AdapterBottomGrid(mContext, mListBottom);
        mGridBottom.setAdapter(mAdapterBottomGrid);
    }

    private void setDataTop() {
        //已订阅区域数据
        mListTop = new ArrayList<>();

        mBeanSubGrid = new BeanSubGrid();
        mBeanSubGrid.setName("军事");
        mBeanSubGrid.setButton(R.mipmap.img_cut);
        mListTop.add(mBeanSubGrid);

        mBeanSubGrid = new BeanSubGrid();
        mBeanSubGrid.setName("娱乐");
        mBeanSubGrid.setButton(R.mipmap.img_cut);
        mListTop.add(mBeanSubGrid);
        
        mBeanSubGrid = new BeanSubGrid();
        mBeanSubGrid.setName("JAVA");
        mBeanSubGrid.setButton(R.mipmap.img_add);
        mListBottom.add(mBeanSubGrid);
    }

    private void setDataBottom() {
        //待订阅区域数据
        mListBottom = new ArrayList<>();
        
        mBeanSubGrid = new BeanSubGrid();
        mBeanSubGrid.setName("Python");
        mBeanSubGrid.setButton(R.mipmap.img_add);
        mListBottom.add(mBeanSubGrid);

        mBeanSubGrid = new BeanSubGrid();
        mBeanSubGrid.setName("Android");
        mBeanSubGrid.setButton(R.mipmap.img_add);
        mListBottom.add(mBeanSubGrid);

        mBeanSubGrid = new BeanSubGrid();
        mBeanSubGrid.setName("IOS");
        mBeanSubGrid.setButton(R.mipmap.img_add);
        mListBottom.add(mBeanSubGrid);
    }
}

感谢阅读！有疑问或者更好的方法实现可以留言或者私信我！

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

江西南昌的一枚Android小白，努力学习ing！
微信：yu1563782588
QQ：1563782588

用Java语句来诠释人生

if ( life != 0 ) {
Learn JAVA;
Learn Android;
Live happily;
}