在开始之前，先上一张效果图
突然发现有点知乎的味道。。。的确。。知乎灰#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> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimaryitem> <item name="colorPrimaryDark">@color/colorPrimaryDarkitem> <item name="colorAccent">@color/colorAccentitem> style> <style name="bottom_tag_style" > <item name="android:layout_width">wrap_contentitem> <item name="android:layout_height">wrap_contentitem> <item name="android:layout_gravity">center_verticalitem> <item name="android:button">@nullitem> <item name="android:drawablePadding">5dpitem> <item name="android:textColor">@drawable/bottom_textcolor_drawable_selectoritem> <item name="android:textSize">14spitem> <item name="android:layout_weight">1item> 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; } }
5、解决底部按钮与android虚拟按键的冲突，在activity的onCreate方法中加入以下代码，可以屏蔽虚拟按键
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_FULLSCREEN);
具体的源代码可以在我的github上查看https://github.com/Vito-Yan/MYangtzeu
下面我们使用xutils来初始化控件，xutils3可以操作数据库，联网请求，初始化控件，加载图片。。。。
可以在github下载最新的xutils3，下载之后引入，修改build版本，关联库到app，在此不加赘述。
使用方法：在这里使用注解关联视图比以前更方便，之后也会用到xutils联网请求数据。
package com.vitoyan.myangtzeu.fragment; 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; import com.vitoyan.myangtzeu.view.NoScrollViewPager; import org.xutils.view.annotation.ViewInject; import org.xutils.x; /** * 作者：Vito-Yan * 作用：正文Fragment */ public class ContentFragment extends BaseFragment { //2.初始化控件 @ViewInject(R.id.viewpager) private NoScrollViewPager viewpager; @ViewInject(R.id.rg_main) 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); //1.把视图注入到框架中，让ContentFragment.this和View关联起来 x.view().inject(ContentFragment.this,view); return view; } @Override public void initData() { super.initData(); LogUtil.e("正文数据被初始化了"); //设置默认选中首页 rg_main.check(R.id.rb_home); } }