Leo仿【DOTA视频站】项目实践【一】----Fragment、Tab实现

        楼主是在一家手机方案公司工作的。实际开发能力有所欠缺。故在工作之余自己动手开发一些小东西。接下来的一段时间主要想仿照这“DOTA视频站”这个应用来写一个自己的DOTA2的APK。（我也非常喜欢玩DOTA2，哈哈）

        废话不多说，欢迎大家留言，相互学习。

        首先留一个大神的网址：http://blog.csdn.net/lmj623565791/article/details/24740977；在这里详细介绍了多种Tab界面实现的方法。有兴趣可以看看。我也是采用了里面的一种方法----FragmentManager+Fragment实现。以前一直都是直接用ViewPager实现的，现在没有使用，一方面是由于想用新的方法；另一方面是想在主界面中使用ViewPager滑动切换（类似DOTA视频站）。

        线看看效果图吧：



        首先看看MainActivity：应该很简单易懂的。

package com.example.tabfragment;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener {
private MainTab01 mTab01;
private MainTab02 mTab02;
private MainTab03 mTab03;
private MainTab04 mTab04;

/**
* 底部四个按钮
*/
private LinearLayout mTabBtnWeixin;
private LinearLayout mTabBtnFrd;
private LinearLayout mTabBtnAddress;
private LinearLayout mTabBtnSettings;
/**
* 用于对Fragment进行管理
*/
private FragmentManager fragmentManager;

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
fragmentManager = getFragmentManager();
setTabSelection(0);
}

private void initViews() {

mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_home);
mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_speak);
mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_user);
mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_down);

mTabBtnWeixin.setOnClickListener(this);
mTabBtnFrd.setOnClickListener(this);
mTabBtnAddress.setOnClickListener(this);
mTabBtnSettings.setOnClickListener(this);
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.id_tab_bottom_home:
setTabSelection(0);
break;
case R.id.id_tab_bottom_speak:
setTabSelection(1);
break;
case R.id.id_tab_bottom_user:
setTabSelection(2);
break;
case R.id.id_tab_bottom_down:
setTabSelection(3);
break;

default:
break;
}
}

/**
* 根据传入的index参数来设置选中的tab页。
*
*/
@SuppressLint("NewApi")
private void setTabSelection(int index) {
// 重置按钮
resetBtn();
// 开启一个Fragment事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
hideFragments(transaction);
switch (index) {
case 0:
// 当点击了消息tab时，改变控件的图片和文字颜色
((ImageButton) mTabBtnWeixin
.findViewById(R.id.btn_tab_bottom_home))
.setImageResource(R.drawable.navi_home_s);
if (mTab01 == null) {
// 如果MessageFragment为空，则创建一个并添加到界面上
mTab01 = new MainTab01();
transaction.add(R.id.id_content, mTab01);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(mTab01);
}
break;
case 1:
// 当点击了消息tab时，改变控件的图片和文字颜色
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_speak))
.setImageResource(R.drawable.navi_speak_s);
if (mTab02 == null) {
// 如果MessageFragment为空，则创建一个并添加到界面上
mTab02 = new MainTab02();
transaction.add(R.id.id_content, mTab02);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(mTab02);
}
break;
case 2:
// 当点击了动态tab时，改变控件的图片和文字颜色
((ImageButton) mTabBtnAddress
.findViewById(R.id.btn_tab_bottom_user))
.setImageResource(R.drawable.navi_user_s);
if (mTab03 == null) {
// 如果NewsFragment为空，则创建一个并添加到界面上
mTab03 = new MainTab03();
transaction.add(R.id.id_content, mTab03);
} else {
// 如果NewsFragment不为空，则直接将它显示出来
transaction.show(mTab03);
}
break;
case 3:
// 当点击了设置tab时，改变控件的图片和文字颜色
((ImageButton) mTabBtnSettings
.findViewById(R.id.btn_tab_bottom_down))
.setImageResource(R.drawable.navi_down_s);
if (mTab04 == null) {
// 如果SettingFragment为空，则创建一个并添加到界面上
mTab04 = new MainTab04();
transaction.add(R.id.id_content, mTab04);
} else {
// 如果SettingFragment不为空，则直接将它显示出来
transaction.show(mTab04);
}
break;
}
transaction.commit();
}

/**
* 清除掉所有的选中状态。
*/
private void resetBtn() {
((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_home))
.setImageResource(R.drawable.navi_home_n);
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_speak))
.setImageResource(R.drawable.navi_speak_n);
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_user))
.setImageResource(R.drawable.navi_user_n);
((ImageButton) mTabBtnSettings
.findViewById(R.id.btn_tab_bottom_down))
.setImageResource(R.drawable.navi_down_n);
}

/**
* 将所有的Fragment都置为隐藏状态。
*
* @param transaction
*            用于对Fragment执行操作的事务
*/
@SuppressLint("NewApi")
private void hideFragments(FragmentTransaction transaction) {
if (mTab01 != null) {
transaction.hide(mTab01);
}
if (mTab02 != null) {
transaction.hide(mTab02);
}
if (mTab03 != null) {
transaction.hide(mTab03);
}
if (mTab04 != null) {
transaction.hide(mTab04);
}

}

}

再次来看看activity_main.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>

<include layout="@layout/bottom_bar"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ly_main_tab_bottom"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="@drawable/bottom_bar" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="55dp" >

<LinearLayout
android:id="@+id/id_tab_bottom_home"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/navi_home_n" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主页" />
</LinearLayout>

<LinearLayout
android:id="@+id/id_tab_bottom_speak"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_speak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/navi_speak_n" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="解说" />
</LinearLayout>

<LinearLayout
android:id="@+id/id_tab_bottom_user"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_user"
android:layout_w
b359
idth="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/navi_user_n" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="优库" />
</LinearLayout>

<LinearLayout
android:id="@+id/id_tab_bottom_down"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/navi_down_n" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="下载" />
</LinearLayout>
</LinearLayout>

</RelativeLayout>

在这里可能有人要鄙视说Tab点击更改图片颜色的部分写的好麻烦，直接用select xml多方便。其实这里是我懒得改动了，直接把别人的复制过来，更改了几张图库。

这只是一个简单的开始。后续继续努力哦。希望大家支持。