Android Developer Headline App (iii) to achieve home _android

Related reading:

Android Developer Headlines (a) launch page implementation

Android Developer Headline (ii) to implement the left-sliding menu

Title: Take you to achieve the developer's headline app (iii) Home implementation

Grammar_cjkruby:true

I. Preface

Today, the homepage of the developer's headline app is implemented. This is the third article in this series, and the effect is as follows:

As we can see from the GIF animated diagram, the outermost layer has three tabs (featured, subscribed, found), a carousel picture advertisement at the top of the featured interface, and a list of selected articles below the ad.

Two. Outer three tab implementation

I am here with Viewpager to achieve, you can slide around, flexible hidden below the fragment display hidden.

1. layout file

The layout file is relatively simple, with three TextView relativelayout + Viewpager below

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:background=" @color White_normal "> <relativelayout android:id=" @+id/ll_title "android:layout_width=" Match_parent "Android:layout"
_height= "44DP" > <linearlayout android:layout_width= "match_parent" android:layout_height= "Match_parent" android:background= "@color/main_color" android:orientation= "horizontal" > <textview android:id= "@+id/tv_ Selected "Android:layout_width=" 0DP "android:layout_height=" wrap_content "android:layout_gravity=" center_vertical "android:layout_weight=" 1 "android:gravity=" Center_horizontal "android:text=" selected "Android:textcolor=" @drawable Main_title_txt_sel "/> <textview android:id=" @+id/tv_subscribe "android:layout_width=" 0DP "Android:layout_ height= "Wrap_content" android:layout_gravity= "center_vertical" android:layout_weight= "1" android:gravity= "Center_horizontal "android:text=" subscription "android:textcolor=" @drawable/main_title_txt_sel/> <textview = "@+id/tv_find" android:layout_width= "0DP" android:layout_height= "wrap_content" android:layout_gravity= "Center_ Vertical "android:layout_weight=" 1 "android:gravity=" center_horizontal "android:text=" found "android:textcolor=" @ Drawable/main_title_txt_sel "/> </LinearLayout> <view android:id=" @+id/view_indicator "Android:layout_" Width= "15DP" android:layout_height= "2DP" android:layout_alignparentbottom= "true" android:background= "@color/white
_normal "/> </RelativeLayout> <android.support.v4.view.viewpager android:id=" @+id/viewpager_home " Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:layout_below= "@+id/ll_title"/  > </RelativeLayout>

2. Initialize three fragment and populate to Viewpager, Viewpager settings change monitor.

Vpager = (Viewpager) Rootview.findviewbyid (r.id.viewpager_home);
Selectedfragment selectedfragment=new selectedfragment ();
Subscribefragment subscribefragment=new subscribefragment ();
Findfragment findfragment=new findfragment ();
List.add (selectedfragment);
List.add (subscribefragment);
List.add (findfragment);
adapter = new Fragmentadapter (getactivity (). Getsupportfragmentmanager (), list);
Vpager.setadapter (adapter);
Vpager.setoffscreenpagelimit (2);
Vpager.setcurrentitem (0);

3.fragmentadapter.java

Inheriting the Fragmentstatepageradapter,viewpager fill adapter is simple to implement.

/**
* Viewpager Adapter
* @author Ansen
* @create time 2016-04-18/public
class Fragmentadapter Extends Fragmentstatepageradapter {
private list<fragment> List;

Public Fragmentadapter (Fragmentmanager FM, list<fragment> List) {
super (FM);
this.list = list;
}

Public Fragmentadapter (fragmentmanager FM) {
super (FM);
}
@Override public
Fragment getitem (int arg0) {return
list.get (arg0);
}
@Override public
int GetCount () {return
list.size ();
}
}

4. Indicator initialization

We need to slide the indicator when we viewpager, and the indicator's width is one-third of the screen, so we need to assign a value to the indicator when the activity is created and move to the starting position.

private void Initcursorposition () {
layoutparams layoutparams=viewindicator.getlayoutparams ();
LAYOUTPARAMS.WIDTH=SCREENWIDTH/3;
Viewindicator.setlayoutparams (layoutparams);
translateanimation animation = new Translateanimation (-screenwidth/3,0,0,0);
Animation.setfillafter (true);
Viewindicator.startanimation (animation);
}

5.Viewpager What should I do when switching?

1). Move indicator

2). Change the color of the text

3). The settings are currently selected and the indicator will need to be moved.

Private Onpagechangelistener pagechangelistener=new Onpagechangelistener () {
@Override public
Void onpageselected (int index) {
translateanimation (index);//Move indicator
changetextcolor (index);//Change text color
currentindex=index;//setting is currently selected
}
@Override public
void onpagescrolled (int arg0, float arg1, int arg2) {}< c17/> @Override public
void onpagescrollstatechanged (int arg0) {}

6. Indicator Move Method translateanimation

Pass in a subscript to determine the current position, then judge the last position, know where to move from, and then turn on Android's own mobile animation.

private void translateanimation (int index) {
translateanimation animation = null;
Switch (index) {case
0://subscribe to-> Select
animation=new translateanimation ((SCREENWIDTH/3), 0,0,0);
break;
Case 1://
if (0==currentindex) {//Featured-> subscription
animation=new translateanimation (0,screenwidth/3,0,0);
} else if (2==currentindex) {//Discovery-> Subscription
animation=new translateanimation ((SCREENWIDTH/3) *2,screenwidth/3,0,0);
Break
;
Case 2://Subscription-"Found
animation=new translateanimation (SCREENWIDTH/3, (SCREENWIDTH/3) *2,0,0);
" break;
Animation.setfillafter (true);
Animation.setduration ();
Viewindicator.startanimation (animation);
}

7. Get screen width and height

I write the method in the activity, and at work it is best to put him in the tool class.

private void Getscreensize (activity context) {
displaymetrics dm = new Displaymetrics ();
Context.getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM);
ScreenWidth = Dm.widthpixels;
ScreenHeight = Dm.heightpixels;
}

Three. " Featured "Fragment implementation

On the whole, it is a ListView, and the top carousel is the head of ListView. The head wheel is also used for the Viewpager implementation, starting here with the developer Headline app launch page implementation principle that we talked about in the first article is very similar. And then add a timer for a period of time to set Viewpager the current page can be.

Description: Our images here are static, and a commercial app carousel image must be obtained from the server, and the developer's headline app is from the server.

1. Header Layout File

is a viewpager+ mount point linearlayout and then the outer layout sets a height of 200dp.

<?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=" match_parent "android:orientation=" vertical " > <relativelayout android:layout_width= "wrap_content" android:layout_height= "200DP" > < Android.support.v4.view.ViewPager android:id= "@+id/viewpager" android:layout_width= "Match_parent" Android:layout_ height= "Match_parent"/> <textview android:id= "@+id/tv_content" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" android:layout_alignparentbottom= "true" android:layout_marginbottom= "10DP" Android:
layout_marginleft= "5DP" android:text= "public number: ansen_666"/> <relativelayout android:layout_width= "Fill_parent" android:layout_height= "wrap_content" android:orientation= "vertical" > <linearlayout android:id= "@+id/" ViewGroup "android:layout_width=" fill_parent "android:layout_height=" Wrap_content "Android:layout_" Alignparentbottom="True" android:layout_marginbottom= "5DP" android:gravity= "center_horizontal" android:orientation= "Horizontal"/  > </RelativeLayout> </RelativeLayout> </LinearLayout>

2. Can be sliding static picture implementation

Initialize the Viewpager of the carousel, initialize the point view, add a linear layout, and then add the entire layout to the ListView head.

Viewpager = (Viewpager) Headview.findviewbyid (R.id.viewpager);
Selectedpageradapter=new Selectedpageradapter (Getactivity (), Carousepagerselectview);
Viewpager.setoffscreenpagelimit (2);
Viewpager.setcurrentitem (0);
Viewpager.setonpagechangelistener (Onpagechangelistener);
Viewpager.setadapter (Selectedpageradapter);
ViewGroup Group = (viewgroup) Headview.findviewbyid (r.id.viewgroup);//Initialize bottom Display control tips = new Imageview[3]; for (int i = 0; i < tips.length i++) {ImageView ImageView = new ImageView (getactivity ()); if (i = = 0) {IMAGEVIEW.SETB
Ackgroundresource (r.drawable.page_indicator_focused);
else {imageview.setbackgroundresource (r.drawable.page_indicator_unfocused);} tips[i] = ImageView; Linearlayout.layoutparams layoutparams = new Linearlayout.layoutparams (New Viewgroup.layoutparams (LayoutParams.WRAP
_content,layoutparams.wrap_content)); Layoutparams.leftmargin = 10;//Set point view left margin Layoutparams.rightmargin = 10;//Set point point View's right margin Group.addview (ImageView,
Layoutparams); } listview= (ListView) Rootview.findviewbyid (r.id.list);  Listview.addheaderview (Headview);

3. How to achieve the carousel effect

My side is implemented with Timer+handler, timer used to time, handler to update the UI.

Precautions:

1. When the carousel needs to determine whether the last page

2. The update UI needs to be in the main thread.

private timer timer;
Private final int carousel_time = 3000;//scrolling Interval timer = new timer (true);//Initialize Timer
timer.schedule (task, 0, Carousel_time) //Delay 0ms, 3000ms execute once timertask task = new TimerTask () {public
void run () {handler.sendemptymessage (
carousel _time);
}
; Private Handler handler=new Handler () {public
void Handlemessage (msg) {
switch (msg.what) {case
Carousel_time:
if (currentindex>=tips.length-1) {//has scrolled to the last, starting from the first page
viewpager.setcurrentitem (0);
} else{//start next page
Viewpager.setcurrentitem (currentindex+1);
}
break;}};

Android developers on the development of the headline app (iii) to achieve the first page of the relevant introduction, to introduce so many people, I hope to help you!