Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)

第二种主界面风格则是以网易新闻、凤凰新闻以及新推出的新浪博客(阅读版)为代表,使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View,而是Fragment。所以适配器不能继承PagerAdapter,而要继承FragmentPagerAdapter,这是在android.support.v4.app.FragmentPagerAdapter包里的。有点奇葩的是,FragmentPagerAdapter只在这个包里有,在android.app.*这个包下面么有。到后面会发现,只能用android.support.v4.app.*包下面的东西。两个包里的FragmentManager是不通用的,而且两个包里提供的Fragment也不大一样。如果继承android.app.*下的Fragment,则不能重新写构造函数,只能用默认的。v4的包里么有这个限制。

下图是网易新闻、凤凰新闻、新浪博客的截图:

关于仿网易新闻客户端代码已经很多了,本人主要根据开源的这个CSDN客户端的制作,准备一步步搞下。这本是一个大牛之作发在oschina上,参考链接里分5步去实现。我看了它的代码,是染在一起的。比如要完这个导航不需要额外的三个包,而他的资源里是弄一起的。所以准备自己玩玩,顺便记录开发中的问题。

第一步:最上面的导航栏

即有“网易新闻”四个大字这一栏。布局文件head_title_panel.xml:

<?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="wrap_content"
    android:background="@color/light_blue"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/headIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:src="@drawable/biz_navigation_tab_news_pressed" />

    <ImageView
        android:id="@+id/headDivider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:src="@drawable/base_action_bar_back_divider" />

    <TextView
        android:id="@+id/headTV"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="4dp"
        android:layout_weight="1"
        android:text="CSDN资讯"
        android:textColor="@color/white"
        android:textSize="21sp"
        android:textStyle="bold">
    </TextView>

</LinearLayout>

为了日后操作上的方便,我将它映射成一个HeadTitlePanel.java文件,可以看到这种写法跟上篇 上下panel的定义是有点区别的。

package org.yanzi.ui;

import org.yanzi.csdnproject.R;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class HeadTitlePanel extends RelativeLayout {

	private Context mContext;
	private TextView mHeadTV;
	private ImageView mHeadIcon;
	private ImageView mHeadDivider;

	public HeadTitlePanel(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		mContext = context;
		View parent = LayoutInflater.from(mContext).inflate(R.layout.head_title_panel, this, true);
		mHeadTV = (TextView) parent.findViewById(R.id.headTV);
	}

}

第二步:ViewPager的导航栏

这个本来我是准备自己封装个的,网上也有用Radiobutton封装的,考虑到它这个导航栏还是不固定长度可以滑动的,时间原因暂时不封装了,使用开源Android-ViewPagerIndicator-master.zip 这个包,这个人的github链接:https://github.com/JakeWharton 将其中的library文件夹改名ViewPagerIndicator_library导进来。这个里面有好几种Indicator,我们主要用TabPageIndicator这个。

第三步:MainActivity的布局:

activity_main.xml

<RelativeLayout 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"
    android:background="#eee"
    tools:context=".MainActivity" >

    <org.yanzi.ui.HeadTitlePanel
        android:id="@+id/head_title_panel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" />

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/page_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/head_title_panel"
        android:background="@color/transparentblue" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/page_indicator"
       />

</RelativeLayout>

MainActivity.java

package org.yanzi.csdnproject;

import org.yanzi.viewpager.adapter.TabAdapter;

import com.viewpagerindicator.TabPageIndicator;

import android.os.Bundle;
import android.app.Activity;
import android.app.FragmentManager;
import android.view.Menu;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {
private TabPageIndicator mPageIndicator;
private ViewPager mViewPager;
private FragmentPagerAdapter fragPagerAdapter;

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

		fragPagerAdapter = new TabAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(fragPagerAdapter);
		mPageIndicator.setViewPager(mViewPager, 0);

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	private void initUI(){
		mPageIndicator = (TabPageIndicator)findViewById(R.id.page_indicator);
		mViewPager = (ViewPager)findViewById(R.id.view_pager);
	}

}

出奇的简单,比单纯用Fragment还简单,原因是只需把Fragment塞到适配器里就ok了,适配器为我们做了Fragment的切换等工作,我们能做的也就是在适配器里new Fragment的时候判断是否已存在。以下几点需要注意:

1、在styles.xml里它定义了样式:

    <style name="MyTheme" parent="AppBaseTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowBackground">@drawable/init_pic</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/black</item>
    </style>

这个是依赖于导进去的包的。

2、它这里用了android:windowBackground的属性,所以app开启瞬间会有图片弹出,之后设置MainActivity的布局背景为android:background="#eee",又把图片替换了。如果不设android:background="#eee" 会一直看到这个图片不消失。

3、因为开篇讲的原因,MainActivity只能继承自FragmentActivity。

第四步:MainFragment.java,此类继承Fragment,且是android.support.v4.app.Fragment下的。

package org.yanzi.fragment;

import org.yanzi.csdnproject.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainFragment extends Fragment {
	private int mNewsType = 0;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View v = inflater.inflate(R.layout.tab_item_fragment_main, null);
		TextView tip = (TextView) v.findViewById(R.id.id_tip);
		Bundle b = getArguments();
		String title = b.getString("TITLES");
		tip.setText(title);
		return v;
	}
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
	}

}

就是弄了一个布局,然后从中取得参数并显示。

第五步:ViewPager的适配器TabAdapter.java

package org.yanzi.viewpager.adapter;

import org.yanzi.constant.Constant;
import org.yanzi.fragment.MainFragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabAdapter extends FragmentPagerAdapter {

	public TabAdapter(FragmentManager fm) {

		super(fm);
		// TODO Auto-generated constructor stub
	}

	@Override
	public Fragment getItem(int position) {
		// TODO Auto-generated method stub
		MainFragment fragment = new MainFragment();
		Bundle b = new Bundle();
		String title = Constant.TITLES[position];
		b.putString("TITLES", title);
		fragment.setArguments(b);
		return fragment;
	}

	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		return Constant.TITLES[position];
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return Constant.TITLES.length;
	}

}

主要是重写getItem,在这里实例化Fragment,同时设传递的参数。其实这里可以通过

FragmentManager

按照Tag查找对应的Fragment是否存在,再进行实例化。

另外,getPageTitle这个接口必须重写,其实看TabPageIndicator.java这个类的实现可以发现,它需要传进去一个ViewPager,然后获得适配器,从适配器里得到Title。因为用了这个开源包,不能再用ViewPager的setOnPageChangeListener接口,只能用mPageIndicator.setOnPageChangeListener(listener)进行监听。

完毕,源码链接:链接:http://pan.baidu.com/s/1bn4EFbp 密码:dx4s

效果如下:

Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)

时间: 2024-10-20 03:42:19

Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)的相关文章

Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)

另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所以适配器不能继承PagerAdapter,而要继承FragmentPagerAdapter,这是在android.support.v4.app.FragmentPagerAdapter包里的.有点奇葩的是,FragmentPagerAdapter仅仅在这个包里有,在android.app.*这个包以

Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的"经典"指这种交互经典,非本文的代

Android应用经典主界面框架之一:仿QQ (使用Fragment)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的“经典”指这种交互经典,非本文的代码框架结构

ScrollView + viewpager实现android的app主界面效果

ScrollView + viewpager实现android的app主界面效果 Android的主界面一般由两部分组成:导航栏,滑动的分屏(我自己这么叫的).其中滑动的分屏肯定是用的fragment,具体的承载的控件是viewpager.而导航分页栏用的控件就有很多了,tabhost,Scrollview或者自定义的都行. 个人认为tabhost和Scrollview都是比较好的,因为后期的可拓展性比较好,除非导航栏界面确实属于"自定义"范畴,基本上我们可以选择这两样就可以了. 其实

【FastDev4Android框架开发】Android Design支持库TabLayout打造仿网易新闻Tab标签效果(三十七)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50158985 本文出自:[江清清的博客] (一).前言: 仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现.要实现的顶部的Tab标签的效果有很多方法例如采用开源项目ViewPagerIndicator中的TabPageIndicator就可以实现.不过我们今天不讲V

Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端

转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3.0以下呢,google并没有给我提供在3.0以下支持ActionBar的包,但是外国的大牛JakeWharton实现了在3.0以下使用ActionBar, JakeWharton这位大牛是ActionBarSherlock,Android-ViewPagerIndicator ,NineOldAn

Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻客户端Tab标签的功能,ActionBarSherlock是在3.0以下的机器支持ActionBar的功能,有兴趣的可以看看开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端,今天用到的是JakeWharton的另一开源控件ViewPageIndicator,ViewPager想必大家都知道,Indicator指示器的意思,所以ViewPageIndica

Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签

之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持ActionBar的功能,有兴趣的能够看看开源框架ActionBarSherlock 和 ViewPager 仿网易新闻client,今天用到的是JakeWharton的还有一开源控件ViewPageIndicator.ViewPager想必大家都知道,Indicator指示器的意思,所以ViewPag

Android组件——使用DrawerLayout仿网易新闻v4.4侧滑菜单

转载请注明出处:http://blog.csdn.net/allen315410/article/details/42914501 概述 今天这篇博客将记录一些关于DrawerLayout的基本用法,我想关于DrawerLayout的用法也许有不少不够了解,这也是比较正常的事情,因为DrawerLayout作为Android组件是Google后来在android中添加的,在android.support.v4包下.那么,DrawerLayout是一个怎么的组件呢?我们知道,当我们使用Androi