Android realizes NetEase News Client Homepage Effect _android

About the realization of NetEase news Client interface, has written many blogs before, please refer to:

Android realizes NetEase News client effect

Android realizes NetEase News client sideslip menu (i)

Android realizes NetEase News client sideslip menu (ii)

Today with Viewpager + fragmentadapter + viewpagerindicator to achieve.

Viewpagerindicator is a pagination index widget compatible Viewpager, the package is very good, has been used for many well-known applications. The use of specific APIs, you can download the official Demo sample research will know!

Download Address: Https://github.com/JakeWharton/ViewPagerIndicator

Sample is provided to us as an example, the library is an engineering, we need to use it as a repository of our own projects, we create a new Android project, the library into the project I will not introduce.

Note:

Eclipse: If you create a new project Libs directory under the Android-support-v4.jar, you want to delete it, because viewpageindicator inside the library, our project does not allow two Android-support-v4.jar, do not delete our project can not compile.

Android Studio: Direct import module on the line.

Activity_main.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 
 android:layout_width= "Match_ Parent " 
 android:layout_height=" match_parent " 
 android:orientation=" vertical "> 
 
 <include layout= "@layout/activity_top"/> 
 
 <com.viewpagerindicator.tabpageindicator 
 android:id= "@+id/indicator" 
 android:layout_width= "match_parent" 
 android:layout_height= "wrap_content" 
 android:background= "@ Android:color/transparent "> 
 </com.viewpagerindicator.TabPageIndicator> 
 
 < Android.support.v4.view.ViewPager 
 android:id= "@+id/viewpager" 
 android:layout_width= "Match_parent" 
 android:layout_height= "match_parent" 
 android:background= "#EEF3FA" > 
 </ Android.support.v4.view.viewpager> 
</LinearLayout> 

The layout is simple, a activity_top.xml layout is introduced at the top, and the content can be defined by itself.
Mainactivity.java

Package com.jackie.neteasenews; 
Import Android.os.Bundle; 
Import android.support.v4.app.Fragment; 
Import android.support.v4.app.FragmentActivity; 
 
Import Android.support.v4.view.ViewPager; 
 
Import Com.viewpagerindicator.TabPageIndicator; 
Import java.util.ArrayList; 
 
Import java.util.List; 
 public class Mainactivity extends Fragmentactivity {private Tabpageindicator mtabpageindicator; 
 Private Viewpager Mviewpager; 
 
 Private Viewpagerindicatoradapter Madapter; 
 Private Headlinefragment mheadlinefragment; 
 Private Enjoyfragment menjoyfragment; 
 Private Hotspotfragment mhotspotfragment; 
 Private Sportfragment msportfragment; 
 Private Housefragment mhousefragment; 
 
 Private list<fragment> mfragmentlist; 
 @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
 
 Setcontentview (R.layout.activity_main); 
 Initview (); private void Initview () {mtabpageindicator = (tabpageindicator) Findviewbyid (r.id.indIcator); 
 
 Mviewpager = (Viewpager) Findviewbyid (R.id.viewpager); 
 Mheadlinefragment = new Headlinefragment (); 
 Menjoyfragment = new Enjoyfragment (); 
 Mhotspotfragment = new Hotspotfragment (); 
 Msportfragment = new Sportfragment (); 
 
 Mhousefragment = new Housefragment (); 
 Mfragmentlist = new arraylist<> (); 
 Mfragmentlist.add (mheadlinefragment); 
 Mfragmentlist.add (menjoyfragment); 
 Mfragmentlist.add (mhotspotfragment); 
 Mfragmentlist.add (msportfragment); 
 
 Mfragmentlist.add (mhousefragment); 
 Madapter = new Viewpagerindicatoradapter (Getsupportfragmentmanager (), mfragmentlist); 
 
 Mviewpager.setadapter (Madapter); 
 Instantiate the Tabpageindicator and then set the Viewpager associated Mtabpageindicator.setviewpager (Mviewpager, 1);  } 
}

Viewpagerindicatoradapter.java

Package com.jackie.neteasenews; 
 
Import android.support.v4.app.Fragment; 
Import Android.support.v4.app.FragmentManager; 
Import Android.support.v4.app.FragmentPagerAdapter; 
 
Import java.util.List; 
 
public class Viewpagerindicatoradapter extends Fragmentpageradapter { 
 private list<fragment> mfragmentlist; Public 
 
 static string[] TITLES = new string[] {"Headlines", "Entertainment", "hot spots", "sports", "Real Estate"}; 
 
 Public Viewpagerindicatoradapter (Fragmentmanager FM, list<fragment> fragmentlist) { 
 super (FM); 
 This.mfragmentlist = fragmentlist; 
 } 
 
 @Override public 
 Fragment getitem (int position) {return 
 mfragmentlist.get (position); 
 } 
 
 @Override public 
 int GetCount () {return 
 mfragmentlist.size (); 
 } 
 
 @Override public 
 charsequence getpagetitle (int position) {return 
 titles[position]; 
 } 

The code is simple, but one thing, the above indicator is the system default, not very good-looking, so you need to add the following style in Styles.xml:

<style name= "Styledtabpageindicator" parent= "@android: Style/theme.light" > <item name= " Vpitabpageindicatorstyle "> @style/customtabpageindicator</item> <item name=" Android:windownotitle " >true</item> <item name= "android:animationduration" >5000</item> <item name= "Android: Windowcontentoverlay "> @null </item> </style> <style name=" Customtabpageindicator "parent=" Widget " > <item name= "android:gravity" >center</item> <item name= "Android:background" > @drawable/tab_ indicator</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/customtabpageindicator.text</item> <item name= "android:textsize" >16sp</item> <item name= "Android:maxlines" >1</item> </ style> <style name= "Customtabpageindicator.text" parent= "Widget" > <item name= "Android:textcolor" > @dr 
 Awable/tab_text</item> </style>

Note: In the development process with fragment-related classes, import package will be prompted two packets Android.app and Android.support.v4.app, remember, to ensure that all classes are imported under the same package, or will compile an error.

The effect chart is as follows:

Attached Source Address: https://github.com/shineflower/NeteaseNews.git

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.