我的长大app开发教程第二弹：完成ContentFragment底部按钮

Posted 2020-10-17

在开始之前，先上一张效果图

突然发现有点知乎的味道。。。的确。。知乎灰#989898，知乎蓝15,136,235（逃。。。。

1、学P图

想我大一的时候也用过不少Adobe的软件，昨天重新打开我的Photoshop，电脑提示缺少什么.dll文件，最后弄了一上午，是因为vc2012的运行库出了问题，最后发现一个软件特别好用：DirectX Repair，可以完美解决.dll丢失的问题。

UI素材我是在google的icons素材库下载的https://github.com/google/material-design-icons

图片变换颜色用到了Photoshop的油漆桶工具

这里每个按钮需要两种颜色，点击时可以达到变换的效果

最后还需要一个可以在页面底部放四个button的图片

最后把这些图片放进drawable-hdpi

2、ContentFragment中绑定控件

package com.vitoyan.myangtzeu.fragment;

import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.RadioGroup;

import com.vitoyan.myangtzeu.R;
import com.vitoyan.myangtzeu.base.BaseFragment;
import com.vitoyan.myangtzeu.utils.LogUtil;

/**
 * 作者：Vito-Yan
 * 作用：正文Fragment
 */
public class ContentFragment extends BaseFragment {

    private ViewPager viewpager;
    private RadioGroup rg_main;

    @Override
    public View initView() {
        LogUtil.e("正文视图被初始化了");
        View view = View.inflate(context, R.layout.content_fragment,null);
        viewpager = view.findViewById(R.id.viewpager);
        rg_main = view.findViewById(R.id.rg_main);
        return view;
    }

    @Override
    public void initData() {
        super.initData();
        LogUtil.e("正文数据被初始化了");

        //设置默认选中首页
        rg_main.check(R.id.rb_home);
    }

}

2、content_fragment.xml是底部按钮的布局文件，在线性布局中包裹RadioGroup，RadioGroup中包裹四个button

<?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">

    <com.vitoyan.myangtzeu.view.NoScrollViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_tab_bg"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_home"
            android:drawableTop="@drawable/rb_home_drawable_selector"
            android:gravity="center"
            android:text="首页"
            style="@style/bottom_tag_style"
            />

        <RadioButton
            android:id="@+id/rb_topic"
            android:drawableTop="@drawable/rb_topic_drawable_selector"
            android:gravity="center"
            android:text="话题"
            style="@style/bottom_tag_style"
            />

        <RadioButton
            android:id="@+id/rb_find"
            android:drawableTop="@drawable/rb_find_drawable_selector"
            android:gravity="center"
            android:text="发现"
            style="@style/bottom_tag_style"
            />


        <RadioButton
            android:id="@+id/rb_my"
            android:drawableTop="@drawable/rb_my_drawable_selector"
            android:gravity="center"
            android:text="我的"
            style="@style/bottom_tag_style"
            />




    </RadioGroup>

</LinearLayout>

3、style.xm中的bottom_tag_style是公共的button属性

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="bottom_tag_style" >
        <!-- Customize your theme here. -->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">center_vertical</item>

        <item name="android:button">@null</item>
        <item name="android:drawablePadding">5dp</item>
        <item name="android:textColor">@drawable/bottom_textcolor_drawable_selector</item>

        <item name="android:textSize">14sp</item>
        <item name="android:layout_weight">1</item>
    </style>
</resources>

4、NoScrollViewPager在布局文件中使用该类的时候，实例化该类用该构造方法，这个方法不能少，少的化会崩溃。

package com.vitoyan.myangtzeu.view;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * 作者：Vito-Yan
 * 作用：自定义不可以滑动的ViewPager
 */
public class NoScrollViewPager extends ViewPager {
    /**
     * 通常在代码中实例化的时候用该方法
     * @param context
     */
    public NoScrollViewPager(Context context) {
        super(context);
    }

    /**
     * 在布局文件中使用该类的时候，实例化该类用该构造方法，这个方法不能少，少的化会崩溃。
     * @param context
     * @param attrs
     */
    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 重写触摸事件，消费掉
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return true;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }
}

具体的源代码可以在我的github上查看https://github.com/Vito-Yan/MYangtzeu

下面我们使用xutils来初始化控件