Android化繁为简——从设计一个简单主界面开始

我想做一件事，让编程变成一件简单的事

这个系列的文章代码会非常简单，让初学者也能轻松看得懂，写的出来

今天我用一个最简单的方式实现我们的tab页面

现在市面上大部分应用都有tab页面，各种新闻客户端，团购网站，微信，QQ全都有tab选项卡的点击切换效果

一般都用tab页面作为app应用的主界面。

很大一部分使用ViewPager作为可以左右滑动选项卡，比如网易新闻。

选项卡功能带滑动很多都是用的ViewPagerIndicator这个开源库。之前开发过很多应用也都用到了这个。

 地址 https://github.com/JakeWharton/Android-ViewPagerIndicator。

今天我这里不实用开源框架，只是简单的使用按钮和Fragment实现一个Tab选项卡效果。

为什么不使用开源框架，因为太复杂，而且没有必要，我的项目主页不到100行的代码就可以实现选项卡了。

简单分析下效果，功能非常简单，顶部三个按钮，下面用Fragment填充。点击按钮切换不同Fragment。

功能非常简单，这里按钮我使用的是RadioButton。为什么选择RadioButton。因为适合，选项卡的逻辑就是一个单选逻辑正好符合需求

也可以使用普通Button，其实使用哪个都一样，无非就是一个按钮点击事件，然后做一些操作而已。

使用RadioButton有一个好处，就是check效果，点击RadioButton后，此按钮会获取check效果。通过这个状态可以直接传人带check效果的图片xml代码就变得更加简洁

然后通过CheckedChangeListener监听按钮事件可以非常简单的实现页面切换效果

下面给一个xml布局文件

<merge xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <RadioGroup        android:id="@+id/radioGroup1"        android:layout_width="match_parent"        android:layout_height="50dp"        android:orientation="horizontal" >        <RadioButton            android:id="@+id/radio0"            android:layout_width="match_parent"            android:layout_height="50dp"            android:layout_weight="1"            android:background="@drawable/bg_tab"            android:button="@null"            android:checked="true"            android:gravity="center"            android:text="今天"            android:textColor="@android:color/white"            android:textSize="16sp" />        <RadioButton            android:id="@+id/radio1"            android:layout_width="match_parent"            android:layout_height="50dp"            android:layout_weight="1"            android:background="@drawable/bg_tab"            android:button="@null"            android:checked="false"            android:gravity="center"            android:text="昨天"            android:textColor="@android:color/white"            android:textSize="16sp" />        <RadioButton            android:id="@+id/radio2"            android:layout_width="match_parent"            android:layout_height="50dp"            android:layout_weight="1"            android:background="@drawable/bg_tab"            android:button="@null"            android:gravity="center"            android:text="前天"            android:textColor="@android:color/white"            android:textSize="16sp" />    </RadioGroup></merge>

此处代码就是一个Group 包含三个 RadioButton按钮。此文件作为一个include文件主要目的是方便修改，很多时候是为了代码复用。这里只是为了结构清晰方便修改

Activity代码也非常简单 

package com.iscoding.mobile.icmain;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.widget.RadioGroup;import android.widget.RadioGroup.OnCheckedChangeListener;import com.iscoding.mobile.icmain.fragment.BaseFragment;import com.iscoding.mobile.icmain.fragment.TestFragment;public class MainActivity extends FragmentActivity {private FragmentManager mManager;private FragmentTransaction mTransaction;private RadioGroup mGroup;private BaseFragment[] mFragment = new BaseFragment[3];protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mGroup = (RadioGroup) findViewById(R.id.radioGroup1);mGroup.setOnCheckedChangeListener(new CheckedChangeListener());mManager = getSupportFragmentManager();showPageByIndex(0);}private class CheckedChangeListener implements OnCheckedChangeListener {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.radio0:showPageByIndex(0);break;case R.id.radio1:showPageByIndex(1);break;case R.id.radio2:showPageByIndex(2);break;default:break;}}}private void createFragment(int index) {TestFragment test = new TestFragment();Bundle bundle = new Bundle();bundle.putInt("id", index + 1);test.setArguments(bundle);mFragment[index] = test;}private void showPageByIndex(int index) {mTransaction = mManager.beginTransaction(); if (mFragment[index] == null) {createFragment(index);mTransaction.add(R.id.layout_fragments, mFragment[index]);}hideAllFrag();mTransaction.show(mFragment[index]);mTransaction.commit();}private void hideAllFrag() {for (int i = 0; i < mFragment.length; i++) {if (mFragment[i] != null) {mTransaction.hide(mFragment[i]);}}}}

简单介绍一下

createFragment是创建一个Fragment方法。这里只是创建一个普通Fragment就可以。具体可以随需求而定。

showPageByIndex就是定义一个方法可以显示选择的Fragment

这里是每个点击都会先隐藏所有的Fragment ，然后显示点击的。

通过一个封装可以方便多处调用。

整个项目已经非常简单了。就是希望对新手也能看得懂能更了解代码是如何写的而已