使用Fragments取代tabActivity开发网易新闻客户端框架

最新推荐文章于 2021-05-26 06:24:54 发布
最新推荐文章于 2021-05-26 06:24:54 发布
阅读量200 收藏
点赞数
分类专栏： android


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

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

 


原版的源代码下载： http://download.csdn.net/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.csdn.net/detail/w553000664/4491272


飘零雪花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
替代TabActivity，底部菜单主框架搭建
yide55的专栏
08-16 576
看到还有些人在使用TabActvity，这个已经被Google废弃了的类，为了大家方便，写了一个能代替TabActivity的东西。说白了也就是对viewpager跟底部菜单进行了一个封装，标准的底部菜单自定义控件已经写好，如果有另外的需求扩展底部菜单控件即可（继承BindPagerAdapterView）。先上个效果图： 使用方式见代码：package com.example.tabtest;i
TabActivity替代
08-16
看到还有些人在使用TabActvity，这个已经被Google废弃了的类，为了大家方便，写了一个能代替TabActivity的东西。说白了也就是对viewpager跟底部菜单进行了一个封装，标准的底部菜单自定义控件已经写好，如果有另外的需求重写底部菜单控件即可（继承BindPagerAdapterView）。
ActivityGroup 代替TabActivity的用法
04-22
TabActivity已经被废除，而使用ActivityGroup 代替TabActivity，能够更加自由灵活，少很多限制和依赖！
[Android学习笔记[使用Fragments取代tabActivity开发网易新闻客户端框架
热门推荐
Gracker的专栏
08-10 1万+
前记：手头一直有一个网易新闻客户端的框架（只是一个空架子），基本在上面进行修改，就可以作出自己的东西。里面的主框架是使用TabActivity和TabHost。 近日打开项目发现，TabActivity已然被谷歌取消了，虽然可以继续用，但是谷歌取消它自有取消它的理由。去Doc中一看，TabActivity建议用Fragment代替。于是开始研究这个Fragment使用，一看才知道，这个Fragm
ActivityGroup 替代tabActivity
zhanglfat111的专栏
12-26 255
转载自http://www.cnblogs.com/answer1991/archive/2012/05/08/2489844.html ActivityGroup在实际的开发中是十分常见的，在我使用过的Android应用中，十个应用里面有九个应用的主界面都是使用ActivityGroup的。说起ActivityGroup，在国内好像直接使用它开发的并不多，基本都是使用TabActivity...
RSSFeedFragments:RSS Feed 客户端使用 Android Fragments
07-03
RSS Feed 客户端使用 Fragment 来导航 RSS 项目 特征 Pkrss - 适用于 Android 的 RSS 提要管理器 网页视图 代码异步加载指定的 URL @Override public void onCreate(Bundle savedInstanceState) { super....
谈谈Android Fragments 详细使用
08-31
本篇文章主要介绍了Android Fragments 详细使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
fragments游戏框架
08-28
fragments游戏框架
Android Fragments 使用的一些建议demo
01-12
代码来自博客实例：http://blog.csdn.net/lmj623565791/article/details/42628537 有问题请博客留言~~
TabActivity笔记
04-01
NULL 博文链接：https://l-x.iteye.com/blog/1408157
模仿android网易新闻客户端左右动画效果
05-24
模拟网易新闻客户端首页顶部那个组件效果，包括顶部的特效组件和底部的类似于TabHost的组件。
Android ViewPager + Fragment 替换 TabActivity
Dream It Possible
08-27 5648
Fragment+ViewPager 替换 TabActivity 之前首页的框架采用TabActivity+Activity的形式实现，首页页面切换时，性能消耗较大，本次修改可以大大节约页面切换性能。 下面是这次框架调整的一些具体内容 思路 使用ViewPager作为首页的容器，替换TabActivity； 使用Fragment作为具体页面的容器，替换Activity； 将Fragm
TabActivity的替换做法
SouthRR的专栏
05-14 854
http://stackoverflow.com/questions/12382389/android-tabactivity-deprecated-use-fragments http://android.codeandmagic.org/2011/07/android-tabs-with-fragments/ http://stackoverflow.com/questions/109
【android】使用TabHost+Fragment(替换TabActivity,LocalActivityManager等deprecation类)
u011816377的专栏
12-24 586
链接网址：http://blog.csdn.net/xiaodao1986/article/details/7873013
android4平台用FragmentActivity代替TabActivity实现分页功能
dengfengdeling的专栏
08-28 931
最近在想在android4上实现分页效果，但是发现TabActivity已经被弃用了，在网上查到可以用FragmentActivity来替换TabActivity来实现该功能，下面是我写的一份代码： 第一步：向工程中导入android-support-v4.jar包，步骤可参考http://www.cnblogs.com/ada-zheng/archive/2013/08/02/3231944.
android 网易新闻 登录界面,Android实现网易新闻客户端首页效果
weixin_35986497的博客
05-26 221
关于实现网易新闻客户端的界面，以前写过很多博客，请参考：今天用ViewPager + FragmentAdapter + ViewPagerIndicator来实现。ViewPagerIndicator是一款分页指标小部件兼容ViewPager，封装上做得非常不错，目前已为众多知名应用所使用。具体API的使用，大家可以下载官方demo示例研究研究就知道啦！sample是提供给我们的例子，libra...
已经弃用的TabActivity深深的伤害了我
bzumzs的博客
06-15 5995
在仿写别人的代码的时候发现用到的TabActivity被自动化掉了，仔细一看已经被弃用，deprecated了。 所以我就上网搜啊搜。看别人的博文。这位大神蛙齋所写如下 【 1. 把TabActivity改成Activity(廢話 …) ? public class MainActivity extends TabActivit
在fragments中使用listview
最新发布
05-23
要在Fragment中使用ListView，你需要遵循以下步骤： 1. 在布局文件中添加ListView组件。例如： ```xml <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在Fragment的onCreateView方法中获取ListView的引用。例如： ```java public class MyFragment extends Fragment { private ListView listView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_layout, container, false); listView = (ListView) view.findViewById(R.id.listview); return view; } } ``` 3. 为ListView设置Adapter。例如： ```java public class MyFragment extends Fragment { private ListView listView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_layout, container, false); listView = (ListView) view.findViewById(R.id.listview); // create adapter here MyAdapter adapter = new MyAdapter(getActivity(), myList); listView.setAdapter(adapter); return view; } } ``` 其中，MyAdapter是你自己创建的Adapter类，myList是你要显示在ListView中的数据列表。 4. 实现Adapter类。例如： ```java public class MyAdapter extends ArrayAdapter<String> { private Context context; private List<String> list; public MyAdapter(Context context, List<String> list) { super(context, R.layout.list_item_layout, list); this.context = context; this.list = list; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = LayoutInflater.from(context).inflate(R.layout.list_item_layout, parent, false); holder = new ViewHolder(); holder.textView = (TextView) convertView.findViewById(R.id.textview); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.textView.setText(list.get(position)); return convertView; } static class ViewHolder { TextView textView; } } ``` 其中，list_item_layout是ListView中每个item显示的布局文件，ViewHolder是用来优化ListView性能的类。 这样，你就可以在Fragment中使用ListView了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值