[Android学习笔记[使用Fragments取代tabActivity开发网易新闻客户端框架

于 2012-08-10 20:29:43 发布
阅读量1.5w 收藏 25
点赞数 5
分类专栏： Android学习笔记 文章标签： android 框架 网易 layout radiobutton
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/grackergao/article/details/7852992
版权
本人博客地址:  www.grackertalk.com ,欢迎收藏和访问


2014-3-21 update

代码已经托管到github上了，地址：https://github.com/Gracker/Fragment-NetEase 大家可以直接在那里下载代码。我会定期维护，欢迎大家提交bug，我们一起改进，谢谢大家。


前记：手头一直有一个网易新闻客户端的框架（只是一个空架子），基本在上面进行修改，就可以作出自己的东西。里面的主框架是使用TabActivity和TabHost。

近日打开项目发现，TabActivity已然被谷歌取消了，虽然可以继续用，但是谷歌取消它自有取消它的理由。去Doc中一看，TabActivity建议用Fragment代替。于是开始研究这个Fragment使用，一看才知道，这个Fragment是个好东西。具体怎么用可以参照这个帖子：http://www.eoeandroid.com/thread-71642-1-1.html  讲的很好，所以我就不怎么重复了。这里着重讲一下使用Fragments取代tabActivity开发网易新闻客户端框架。这是截图：



原版的源代码下载：http://download.youkuaiyun.com/detail/w553000664/4491229 （注意这个是使用TabHost+TabActivity实现的，不推荐，但是可以作为一个学习的案例）


下面主要讲解如何使用Fragment来实现上述框架

1.分析一下底部使用TabHost来实现没有问题，在原来的项目中，TabHost来管理5个Activity，在这5个Activity中进行切换，来显示不同的功能。所以上面的界面是由每个Activity来提供的。现在改用Fragment后，TabHost切换的不再是Activity，而是Fragment中的内容。所以可以这样布局主Activity：

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/layout_full"
    android:orientation="vertical" >

    <TabHost
        android:id="@+id/tabhost"
        style="@style/layout_full" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0.0dip"
                android:layout_weight="1.0" >

                <LinearLayout
                    android:id="@+id/linearlayout"
                    style="@style/layout_full"
                    android:orientation="vertical" >

                    <fragment
                        android:id="@+id/content_fragment_top"
                        android:name="fragment_content.TopBarFragment"
                        style="@style/layout_vertical"
                        android:layout_weight="1" />

                    <fragment
                        android:id="@+id/content_fragment"
                        android:name="fragment_content.Contentfragment"
                        style="@style/layout_vertical"
                        android:layout_weight="8" />
                </LinearLayout>
            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                style="@style/layout_vertical"
                android:layout_height="wrap_content" >

                <RelativeLayout
                    android:id="@+id/layout_bottom"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" >

                    <RadioGroup
                        android:id="@+id/radiogroup"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:background="@drawable/bottombg"
                        android:gravity="center_vertical"
                        android:orientation="horizontal" >

                        <RadioButton
                            android:id="@+id/radio_news"
                            android:layout_width="wrap_content"
                            android:background="@drawable/tab_selector_news"
                            android:button="@null"
                            android:checked="true" />

                        <RadioButton
                            android:id="@+id/radio_topic"
                            android:layout_width="wrap_content"
                            android:background="@drawable/tab_selector_topic"
                            android:button="@null" />

                        <RadioButton
                            android:id="@+id/radio_pic"
                            android:layout_width="wrap_content"
                            android:background="@drawable/tab_selector_pic"
                            android:button="@null" />

                        <RadioButton
                            android:id="@+id/radio_follow"
                            android:layout_width="wrap_content"
                            android:background="@drawable/tab_selector_follow"
                            android:button="@null" />

                        <RadioButton
                            android:id="@+id/radio_vote"
                            android:layout_width="wrap_content"
                            android:background="@drawable/tab_selector_vote"
                            android:button="@null" />
                    </RadioGroup>
                </RelativeLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

可以看到布局中使用了两个Fragment，上面一个Fragment来显示标题，下面的Fragment来显示内容：

下面是两个Fragment的布局：很简单：

fragment_content.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_content"
    android:layout_width="match_parent"
    android:layout_height="40dip"
    android:background="#990000" >

    <ImageView
        android:id="@+id/img_netease_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dip"
        android:src="@drawable/netease_top" />

    <TextView
        android:id="@+id/fragment_context_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/img_netease_top"
        android:text="@string/picture_top_left_text"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

</RelativeLayout>

fragment_topbar.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_top"
    android:layout_width="match_parent"
    android:layout_height="40dip"
    android:background="#999999" >

    <ImageView
        android:id="@+id/img_netease_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dip"
        android:src="@drawable/netease_top" />

    <TextView
        android:id="@+id/fragment_topbar_topic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/img_netease_top"
        android:text="@string/picture_top_left_text"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

</RelativeLayout>

下面来看主Activity：

MainActivity.java

package com.gracker.tabfragment;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import android.widget.TabHost;

import com.and.netease.utils.MoveBg;

import fragment_content.Contentfragment;
import fragment_content.TopBarFragment;

public class MainActivity extends Activity {

	RadioGroup radioGroup;
	ImageView img;
	TabHost tabHost;
	int startLeft;
	RelativeLayout bottom_layout;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		tabHost = (TabHost) findViewById(R.id.tabhost);
		bottom_layout = (RelativeLayout) findViewById(R.id.layout_bottom);

		radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
		radioGroup.setOnCheckedChangeListener(checkedChangeListener);

		img = new ImageView(this);
		img.setImageResource(R.drawable.tab_front_bg);
		bottom_layout.addView(img);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

	// 当Tab发生变化时，改变tab的标签的显示图片
	private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {

		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			Contentfragment fragment = (Contentfragment) getFragmentManager()
					.findFragmentById(R.id.content_fragment);
			TopBarFragment fragmentTopic = (TopBarFragment) getFragmentManager()
					.findFragmentById(R.id.content_fragment_top);

			switch (checkedId) {

			case R.id.radio_news:
				fragment.changeContent(0);
				fragmentTopic.changeContent(0);

				tabHost.setCurrentTabByTag("news");
				MoveBg.moveFrontBg(img, startLeft, 0, 0, 0);
				startLeft = 0;
				break;
			case R.id.radio_topic:
				fragment.changeContent(1);
				fragmentTopic.changeContent(1);
				
				tabHost.setCurrentTabByTag("topic");
				MoveBg.moveFrontBg(img, startLeft, img.getWidth(), 0, 0);
				startLeft = img.getWidth();
				break;
			case R.id.radio_pic:
				fragment.changeContent(2);
				fragmentTopic.changeContent(2);
				
				tabHost.setCurrentTabByTag("picture");
				MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 2, 0, 0);
				startLeft = img.getWidth() * 2;
				break;
			case R.id.radio_follow:
				fragment.changeContent(3);
				fragmentTopic.changeContent(3);
				
				tabHost.setCurrentTabByTag("follow");
				MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 3, 0, 0);
				startLeft = img.getWidth() * 3;
				break;
			case R.id.radio_vote:
				fragment.changeContent(4);
				fragmentTopic.changeContent(4);
				
				tabHost.setCurrentTabByTag("vote");
				MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 4, 0, 0);
				startLeft = img.getWidth() * 4;
				break;

			default:
				break;
			}
		}
	};
}

核心就在check监听器中，这里获取两个Fragment的实例，并修改其中的内容。

下面是两个Fragment的代码：

Contentfragment.java

package fragment_content;

import android.app.Fragment;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.gracker.tabfragment.R;

public class Contentfragment extends Fragment {

	TextView mTextView; // 显示的内容

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		Log.v("Contentfragment", "Contentfragment_onCreate");
		super.onCreate(savedInstanceState);
	}

	@Override
	public void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		Log.v("Contentfragment", "Contentfragment_onCreateView");
		// super.onCreateView(inflater, container, savedInstanceState);
		// Inflate the layout for this fragment
		// TextView testText = (TextView)findViewById(R.id.item_detail);
		return inflater.inflate(R.layout.fragment_content, container, false);
	}

	public void changeContent(int index) {
		mTextView = (TextView) getActivity().findViewById(
				R.id.fragment_context_context);
		switch (index) {
		case 0:

			mTextView.setText("1");
			break;
		case 1:

			mTextView.setText("2");
			break;
		case 2:

			mTextView.setText("3");
			break;
		case 3:

			mTextView.setText("4");
			break;
		case 4:

			mTextView.setText("5");
			break;
		default:
			break;
		}
	}

}

TopBarFragment.java： 

package fragment_content;

import com.gracker.tabfragment.R;

import android.os.Bundle;
import android.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TopBarFragment extends Fragment {
	TextView mTextView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		Log.v("Contentfragment", "Contentfragment_onCreate");
		super.onCreate(savedInstanceState);
	}

	@Override
	public void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		Log.v("Contentfragment", "Contentfragment_onCreateView");
		//super.onCreateView(inflater, container, savedInstanceState);
		// Inflate the layout for this fragment
//		TextView testText = (TextView)findViewById(R.id.item_detail);
		return inflater.inflate(R.layout.fragment_topbar, container, false);
	}
	
	public void changeContent(int index) {
		mTextView = (TextView) getActivity().findViewById(
				R.id.fragment_topbar_topic);
		switch (index) {
		case 0:

			mTextView.setText("1");
			break;
		case 1:

			mTextView.setText("2");
			break;
		case 2:

			mTextView.setText("3");
			break;
		case 3:

			mTextView.setText("4");
			break;
		case 4:

			mTextView.setText("5");
			break;
		default:
			break;
		}
	}
}

核心代码就这么多，其实里面还有很多小细节，比如Tabhost切换是，背景的滑动，selector的使用等。

这个例子只是讲解初级的Fragment的使用，Fragment的另一个好处就是屏幕适配，可以让程序在平板和手机上显示不同的效果，仔细研究一下也是很有好处的

下面是 这个修改过的源码：http://download.youkuaiyun.com/detail/w553000664/4491272




评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值