Android App Classic Main interface frame two: Imitation netease news client, CSDN client (Fragment viewpager)

The second main interface style is the NetEase news, Phoenix News and the New Sina blog (read version) as the representative, using Viewpager+fragment, that is, Viewpager in the adapter is not the general view, but Fragment. So the adapter can not inherit Pageradapter, but to inherit Fragmentpageradapter, this is in the Android.support.v4.app.FragmentPagerAdapter package. A bit of a wonderful thing is, fragmentpageradapter only in this bag, in the android.app.* under this bag there. You will find that you can only use the android.support.v4.app.* package below. The Fragmentmanager in the two bags are not universal, and the fragment provided in the two packages are not quite the same. If you inherit fragment under Android.app.*, you cannot write the constructor again, only with the default. There is this restriction in V4 's bag.

Is NetEase news, Phoenix News, Sina Blog:

About The Imitation NetEase News client code has been many, I mainly based on the open source of this CSDN client production, preparation step by step. This is a Daniel's work on the Oschina, reference links in 5 steps to achieve. I looked at its code, and it was dyed together. For example, to complete this navigation does not require an additional three packages, and his resources are to get together. So prepare yourself to play, and by the way record the problems in development.

The first step: The top navigation bar

That is, "NetEase news" Four characters of this 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/ligh T_blue "android:orientation=" horizontal "> <imageview android:id=" @+id/headicon "Android:layout_ Width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "Center_vertical" an droid:layout_marginleft= "8DP" android:layout_marginright= "4DP" android:src= "@drawable/biz_navigation_tab_new S_pressed "/> <imageview android:id=" @+id/headdivider "android:layout_width=" Wrap_content "a         ndroid: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 info "Android:text Color= "@color/white" android:textsize= "21SP" android:textstyle= "bold" > </textview></linearlay Out>

for the convenience of future operation, I mapped it into a Headtitlepanel.java file, and I can see that this kind of writing is somewhat different from the definition of the upper and lower 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);}}

Step Two: Viewpager's navigation bar

This originally I was prepared to encapsulate a, online also useful RadioButton encapsulation, considering it this navigation bar or not fixed length can slide, time reason temporarily not encapsulated, using open source Android-viewpagerindicator-master.zip This package, this person's GitHub link: Https://github.com/JakeWharton will change the Library folder name Viewpagerindicator_library in. There are several kinds of indicator in this, we mainly use tabpageindicator this.

Step three: The layout of 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:backg Round= "#eee" tools:context= ". Mainactivity "> <org.yanzi.ui.headtitlepanel android:id=" @+id/head_title_panel "Android:layout_widt H= "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_pa Rent "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 PR Esent.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, more simple than simply using fragment, the reason is simply put fragment plug into the adapter is OK, the adapter for us to do the fragment switch, etc., we can do is in the adapter in the new fragment when the judgment is already there. The following points need to be noted:

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> &L T;item name= "Android:windownotitle" >true</item> <item name= "Android:animationduration" >5000</ item> <item name= "Android:windowcontentoverlay" > @null </item> </style> <style name= "My  Widget.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:padding Top ">8dp</item> <item name=" Android:paddingbottom ">8dp</item> <item name=" Android:te Xtappearance "> @style/mytextapPearance. tabpageindicator</item> <item name= "android:textsize" >16sp</item> <item name= "android:m        Axlines ">1</item> </style> <style name=" Mytextappearance.tabpageindicator "parent=" Widgets "> <item name= "Android:textstyle" >bold</item> <item name= "Android:textcolor" > @color/black</it Em> </style>

This is dependent on the packets that are in the lead.

2, it used the Android:windowbackground property, so the app opens the moment there will be a picture pop-up, and then set the mainactivity layout background for the android:background= "#eee", and replaced the picture. If you do not set android:background= "#eee" will always see this picture does not disappear.

3, because the opening reason, mainactivity can only inherit from Fragmentactivity.

Fourth Step: Mainfragment.java, this class inherits fragment, and is android.support.v4.app.Fragment under.

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 make a layout, and then get the parameters and display them.

Fifth Step: 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;}} 

The main is to rewrite the getitem, here instantiate fragment, and set the parameters passed. In fact, this can be done

Fragmentmanager

follow the tag to find out if the corresponding fragment exists, and then instantiate it.

In addition, getpagetitle this interface must be rewritten, in fact, see the implementation of Tabpageindicator.java this class can be found, it needs to pass in a viewpager, and then get the adapter, from the adapter to get the title. Because using this open source package, can no longer use Viewpager Setonpagechangelistener interface, can only use Mpageindicator.setonpagechangelistener (listener) to listen.

Finished, Source link: Link: http://pan.baidu.com/s/1bn4EFbp Password: dx4s

The effect is as follows: