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

不操千曲而后晓声,观千剑而后识器。这篇文章主要讲述我的长大app开发教程第二弹:完成ContentFragment底部按钮相关的知识,希望能为你提供帮助。
在开始之前,先上一张效果图

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

文章图片

【我的长大app开发教程第二弹(完成ContentFragment底部按钮)】突然发现有点知乎的味道。。。的确。。知乎灰#989898,知乎蓝15,136,235(逃。。。。
1、学P图
想我大一的时候也用过不少Adobe的软件,昨天重新打开我的Photoshop,电脑提示缺少什么.dll文件,最后弄了一上午,是因为vc2012的运行库出了问题,最后发现一个软件特别好用:DirectX Repair,可以完美解决.dll丢失的问题。
UI素材我是在google的icons素材库下载的https://github.com/google/material-design-icons
图片变换颜色用到了Photoshop的油漆桶工具
这里每个按钮需要两种颜色,点击时可以达到变换的效果
我的长大app开发教程第二弹(完成ContentFragment底部按钮)

文章图片

最后还需要一个可以在页面底部放四个button的图片
我的长大app开发教程第二弹(完成ContentFragment底部按钮)

文章图片

最后把这些图片放进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来初始化控件
 

    推荐阅读