Android app classic main interface framework II: Netease news client and CSDN client (Fragment ViewPager)

The second main interface style is represented by Netease news, Phoenix News, and the new Sina Blog (reading version). ViewPager + Fragment is used, that is, the adapter in ViewPager is not a general View, but Fragment. Therefore, the adapter cannot inherit PagerAdapter, but FragmentPagerAdapter, which is contained in android. support. v4.app. FragmentPagerAdapter. It is amazing that the FragmentPagerAdapter only exists in this package, and does it exist in the android. app. * package. Later, you will find that you can only use the following content under the android. support. v4.app. * package. The FragmentManager in the two packages is not generic, and the Fragment in the two packages is not the same. If you inherit the Fragment under android. app. *, you cannot re-write the constructor. You can only use the default one. This restriction exists in the v4 package.

Netease news, Phoenix news, and Sina Blog:

There are already a lot of code on the Netease news client. I am mainly responsible for the production of the open-source CSDN client, and I am going to prepare it step by step. This is a big bull's work on oschina. The reference links are implemented in five steps. I read its code and it is dyed together. For example, if you want to complete this navigation, you do not need to add three additional packages, but the resources are made together. So you are prepared to play it on your own and record problems in development by the way.

Step 1: top navigation bar

That is, the "Netease News" column. Layout file 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 information" android: textColor = "@ color/white" android: textSize = "21sp" android: textStyle = "bold"> </TextView> </LinearLayout>

To facilitate future operations, I map it into a HeadTitlePanel. java file. We can see that this writing method is a little different from the upper and lower panel definition in the previous article.

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);}}

Step 2: navigation bar of ViewPager

The github link for this person: The https://github.com/JakeWharton named ViewPagerIndicator_library in the library folder. There are several Indicator types in this example. We mainly use TabPageIndicator.

Step 3: MainActivity layout:

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;@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);}}

Surprisingly simple, it is simpler than simply using Fragment, because we only need to plug the Fragment into the adapter and the adapter has switched the Fragment for us, what we can do is to determine whether new Fragment exists in the adapter. Note the following:

1. In styles. xml, it defines the style:

    <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>

This is dependent on the imported package.

2. The android: windowBackground attribute is used here, so when the app is enabled, an image will pop up immediately. Then, the layout background of MainActivity is set to android: background = "# eee ", replace the image. If android: background = "# eee" is not set, the image will not disappear.

3. MainActivity can only inherit from FragmentActivity due to the reasons described in the beginning.

Step 4: MainFragment. java, which inherits Fragment and belongs to 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;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubView 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;}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onActivityCreated(savedInstanceState);}}

Is to get a layout, and then obtain the parameters and display them.

Step 5: ViewPager adapter 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}@Overridepublic Fragment getItem(int position) {// TODO Auto-generated method stubMainFragment fragment = new MainFragment();Bundle b = new Bundle();String title = Constant.TITLES[position];b.putString("TITLES", title);fragment.setArguments(b);return fragment;}@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn Constant.TITLES[position];}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn Constant.TITLES.length;}}

It is mainly to override getItem, instantiate Fragment here, and set the passed parameters. In fact, you can use

FragmentManager

Check whether the corresponding Fragment exists according to the Tag and then instantiate it.

In addition, the getPageTitle interface must be rewritten. In fact, we can see that the implementation of the TabPageIndicator. java class can be found that it needs to be passed into a ViewPager, then get the adapter and get the Title from the adapter. Because this open-source package is used, you cannot use the setOnPageChangeListener interface of ViewPager. You can only use mPageIndicator. setOnPageChangeListener (listener) for listening.

Complete, source code link: Link: http://pan.baidu.com/s/1bn4EFbp password: dx4s

The effect is as follows: