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

第二种主界面风格则是以网易新闻、凤凰新闻以及新推出的新浪博客(阅读版)为代表,使用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=""android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/light_blue"android:orientation="horizontal" ><ImageViewandroid: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" /><ImageViewandroid: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" /><TextViewandroid: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 stubmContext = 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=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:background="#eee"tools:context=".MainActivity" ><org.yanzi.ui.HeadTitlePanelandroid:id="@+id/head_title_panel"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentTop="true" /><com.viewpagerindicator.TabPageIndicatorandroid: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.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/page_indicator"/></RelativeLayout>MainActivity.javapackage 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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initUI();fragPagerAdapter = new TabAdapter(getSupportFragmentManager());mViewPager.setAdapter(fragPagerAdapter);mPageIndicator.setViewPager(mViewPager, 0);}@Overridepublic 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的时候判断是否已存在。以下几点需要注意:如果发现错了,一定要止步.

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

相关文章:

你感兴趣的文章:

标签云: