Android Imitation News top navigation label Switching effect _android

Recently, because of personal interest reasons, wrote a simulation of the top of the news navigation tag demo. Look at the picture below.

So we're going to use this knowledge in general.

1.Fragment
2.FragmentPagerAdapter
3.HorizontalScrollView
4.PopupWindow

OK, so first step into first.

In order to achieve the top label, we need to use Horizontalscrollview, because the original Horizontalscrollview control is not enough to meet our use. So here's a custom horizontalscrollview.

Import android.app.Activity; 
Import Android.content.Context; 
Import Android.util.AttributeSet; 
Import Android.view.View; 
Import Android.widget.HorizontalScrollView; 
 
Import Android.widget.ImageView;  /** * Custom Vertical slide View */public class Columnhorizontalscrollview extends Horizontalscrollview {//Incoming layout private 
 View ll_content; 
 More columns of the layout private View ll_more; 
 Drag bar layout private View rl_colnmn; 
 Left Shadow layout private ImageView leftimage; 
 Right shadow layout private ImageView rightimage; 
 Screen width private int mscreenwidth = 0; 
 Activities of the parent activity are active in private; 
 Public Columnhorizontalscrollview {Super (context); 
 Public Columnhorizontalscrollview (context, AttributeSet attrs) {Super (context, attrs); Public Columnhorizontalscrollview (context, AttributeSet attrs, int defstyle) {Super (context, 
 
 Attrs, Defstyle); /** * The event executed when dragging * @param l * @param t * @param oldl * @param oLDT */@Override protected void onscrollchanged (int l, int t, int oldl, int Oldt) {super.onscrollchanged (L, T, 
  OLDL, Oldt); 
  First set the left and Right Shadow Shade_showorhide (); if (!activity.isfinishing () && ll_content!= null && leftimage!= null && rightimage!= null) {I 
    F (ll_content.getwidth () <= mscreenwidth) {leftimage.setvisibility (view.gone); 
   Rightimage.setvisibility (View.gone); 
  }}else {return; 
   } if (L = = 0) {leftimage.setvisibility (view.gone); 
   Rightimage.setvisibility (view.visible); 
  return; } if (Ll_content.getwidth ()-L + ll_more.getwidth () + rl_colnmn.getleft () = = Mscreenwidth) {leftimage.setvisibility 
   (view.visible); 
   Rightimage.setvisibility (View.gone); 
  return; 
  } leftimage.setvisibility (view.visible); 
 Rightimage.setvisibility (view.visible);  /** * Incoming resource file for parent class * @param activity * @param mscreenwidth * @param paramView1 * @param paramView2 * @param paramView3
  * @param paramView4 * @param paramView5/public void SetParam (activity activity,int Mscreenwidth,view PARAMVI 
  Ew1,imageview paramView2, ImageView paramView3, View paramview4,view paramView5) {this.activity = activity; 
  This.mscreenwidth = Mscreenwidth; 
  Ll_content = ParamView1; 
  Leftimage = ParamView2; 
  Rightimage = PARAMVIEW3; 
  Ll_more = PARAMVIEW4; 
 Rl_colnmn = PARAMVIEW5; /** * Judge left and right shadow display hidden effect/public void shade_showorhide () {if (!activity.isfinishing () && ll_content!= N 
   ull) {measure (0,0); 
    If the overall width is less than the width of the screen, the left and right shadows are hidden if (mscreenwidth >= getmeasuredwidth ()) {leftimage.setvisibility (view.gone); 
   Rightimage.setvisibility (View.gone); 
  }}else {return; 
   //If the left shadow is hidden while sliding to the left, the right side displays if (getLeft () = 0) {leftimage.setvisibility (view.gone); 
   Rightimage.setvisibility (view.visible); 
  return; //If sliding on the rightmost side, the left shadow appears, the right side is hidden if (getright () = Getmeasuredwidth ()-Mscreenwidth)Image.setvisibility (view.visible); 
   Rightimage.setvisibility (View.gone); 
  return; 
  //Otherwise, the description in the middle position, the left and right shadows are displayed leftimage.setvisibility (view.visible); 
 Rightimage.setvisibility (view.visible);  } 
}

Do you need to write fragment when you are done? To show the effect in the diagram, here we'll customize one for easy control

Import android.support.v4.app.Fragment; 
Import Android.os.Bundle; 
Import android.support.annotation.Nullable; 
Import Android.util.Log; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
Import Android.widget.TextView; 
 
 
/** 
 * Custom Fragment class * 
 /Public 
 
class Newsfragment extends Fragment { 
 String text; 
 
 @Override public 
 void OnCreate (Bundle savedinstancestate) { 
  Bundle args = getarguments (); 
  Text = args!= null? Args.getstring ("text"): ""; 
  Super.oncreate (savedinstancestate); 
 } 
 
 @Nullable 
 @Override public 
 View Oncreateview (layoutinflater inflater, ViewGroup container, Bundle Savedinstancestate) { 
  View view = Layoutinflater.from (Getactivity ()). Inflate (r.layout.news_fragment,null); 
  TextView Item_textview = (TextView) View.findviewbyid (R.id.item_textview); 
  Item_textview.settext (text); 
  return view; 
 
 } 

News_fragment.xml

Ok, for ease of control, let's write an adapter  

Import android.support.v4.app.Fragment; 
Import Android.support.v4.app.FragmentManager; 
Import Android.support.v4.app.FragmentPagerAdapter; 
Import android.support.v4.app.FragmentTransaction; 
 
Import Android.view.ViewGroup; 
 
Import java.util.ArrayList; /** * Message Fragment Adapter */public class Newsfragmentpageradapter extends Fragmentpageradapter {private arraylist& Lt Fragment> fragments;//defines a collection that manages all the Fragment private Fragmentmanager fm;//fragment Manager public Newsfragmentpagerada 
  Pter (fragmentmanager FM, arraylist<fragment> fragments) {super (FM); 
  THIS.FM = FM; 
 This.fragments = fragments; 
 @Override public int GetCount () {return fragments.size (); 
 @Override public android.support.v4.app.Fragment getitem (int position) {return fragments.get (position); 
 @Override public int GetItemPosition (object) {return position_none; }//Set collection public void Setfragments (arraylist<fragment> fragments) {if (thiS.fragments!= null) {fragmenttransaction ft = fm.begintransaction (); 
   for (Fragment f:this.fragments) {ft.remove (f); 
   } ft.commit (); 
   FT = null; 
  Fm.executependingtransactions (); 
  } this.fragments = fragments; 
 Notifydatasetchanged (); @Override public Object Instantiateitem (viewgroup container, int position) {Object obj = Super.instantiateitem 
  (container, position); 
 return obj;  } 
}

When you do this, you are almost beginning to write the code for the activity.

Import Android.os.Bundle; 
Import Android.os.Handler; 
Import Android.os.Message; 
Import android.support.v4.app.Fragment; 
Import android.support.v4.app.FragmentActivity; 
Import Android.support.v4.view.ViewPager; 
Import Android.util.DisplayMetrics; 
Import android.view.Gravity; 
Import Android.view.View; 
Import Android.widget.ImageView; 
Import Android.widget.LinearLayout; 
Import Android.widget.RelativeLayout; 
 
Import Android.widget.TextView; 
 
 
Import java.util.ArrayList; /** */public class Mainactivity extends Fragmentactivity {/** custom horizontalscrollview**/private Columnhorizont 
 
 Alscrollview Mcolumnhorizontalscrollview; 
 
 Private LinearLayout mradiogroup_content; 
 
 Private LinearLayout Ll_more_columns; 
 
 Private Relativelayout Rl_colum; 
 
 Private Viewpager Mviewpager; 
 
 Private ImageView Button_more_columns; 
 Private string[] News = new string[] {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10"}; 
 The currently selected column private int colnmuselectindex = 0; //Left shaded part public imageview shade_left; 
 Right Shadow part public ImageView shade_right; 
 
 Screen width private int mscreenwidth = 0; 
 
 Item's height private int mitemwidth = 0; 
 
 Private arraylist<fragment> fragments = new arraylist<> (); 
 
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
  Setcontentview (r.layout.actiivty_top_news); 
  Displaymetrics dm = new Displaymetrics (); 
  Getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM); 
  Mscreenwidth = Dm.widthpixels; 
 Mitemwidth = mscreenwidth/7;//One item width for screen 1/7 intiviews (); 
 
 Private final int switch_page = 0x00123; Private Handler Mhandler = new Handler () {@Override public void Handlemessage (msg) {Super.handlemessage 
   (msg); 
     Switch (msg.what) {case Switch_page:int Selectindex = Msg.getdata (). GetInt ("Selectindex"); for (int i = 0;i < Mradiogroup_content.getchildcount (); i++) {View Localview = Mradiogroup_contenT.getchildat (i); 
      if (i!= Selectindex) localview.setselected (false); 
       else{localview.setselected (TRUE); 
      Mviewpager.setcurrentitem (i); 
   }} break; 
 } 
  } 
 }; /** * Initialization component */protected void Intiviews () {Mcolumnhorizontalscrollview = (Columnhorizontalscrollview) findviewb 
  Yid (R.id.mcolumnhorizontalscrollview); 
  Mradiogroup_content = (linearlayout) Findviewbyid (r.id.mradiogroup_content); 
  Ll_more_columns = (linearlayout) Findviewbyid (r.id.ll_more_columns); 
  Rl_colum = (relativelayout) Findviewbyid (R.id.rl_column); 
  Button_more_columns = (ImageView) Findviewbyid (r.id.button_more_columns); 
  Mviewpager = (Viewpager) Findviewbyid (R.id.mviewpager); 
  Shade_left = (ImageView) Findviewbyid (r.id.shade_left); 
  Shade_right = (ImageView) Findviewbyid (r.id.shade_right); Button_more_columns.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {/ /TODO auto-generated metHod stub}}); 
 Setchangelview (); 
  /** * * */private void Setchangelview () {//Initcolumndata () When the column item is changed; 
  Inittabcolumn (); 
 Initfragment (); 
  /** * Initialize Column column */private void Inittabcolumn () {//delete all controls First mradiogroup_content.removeallviews (); 
  Gets all the associative int count = News.length; Set all layouts for custom Mcolumnhorizontalscrollview.setparam (this, mscreenwidth, Mradiogroup_content, Shade_left, Shade_right, 
  Ll_more_columns, Rl_colum); for (int i = 0; i< count; i++) {Linearlayout.layoutparams params = new Linearlayout.layoutparams (Mitemwidth, VIEWPA Ger. 
   Layoutparams.wrap_content); 
   Params.leftmargin = 10; 
   Params.rightmargin = 10; 
   TextView Localtextview = new TextView (this); 
   Localtextview.settextappearance (this, r.style.top_category_scroll_view_item_text); 
   Localtextview.setbackgroundresource (R.DRAWABLE.RADIO_BUTTONG_BG); 
   Localtextview.setgravity (Gravity.center); 
Localtextview.setpadding (5, 0, 5, 0);   Localtextview.setid (i); 
   Localtextview.settext (News[i]); 
   Localtextview.settextcolor (Getresources (). Getcolorstatelist (R.color.top_category_scroll_text_color_day)); 
   if (Colnmuselectindex = = i) {localtextview.setselected (true); /** * Set Click event/Localtextview.setonclicklistener (new View.onclicklistener () {@Override Publ IC void OnClick (View v) {for (int i = 0;i < Mradiogroup_content.getchildcount (); i++) {View Localview = MRa 
      Diogroup_content.getchildat (i); 
      if (Localview!= v) localview.setselected (false); 
       else{localview.setselected (TRUE); 
      Mviewpager.setcurrentitem (i); 
   } 
     } 
    } 
   }); 
  Mradiogroup_content.addview (Localtextview, I, params); 
  }/** * Select the tab */private void Selecttab (int tab_postion) {colnmuselectindex = tab_postion; for (int i = 0; i < Mradiogroup_content.getchildcount (); i++) {View Checkview = Mradiogroup_contenT.getchildat (tab_postion); 
   int k = Checkview.getmeasuredwidth (); 
   int L = Checkview.getleft (); 
   int i2 = l + K/2-mscreenwidth/2; 
  Mcolumnhorizontalscrollview.smoothscrollto (i2, 0); //Determine if the for (int j = 0; J < Mradiogroup_content.getchildcount (); j + +) {View Checkview = Mradiogroup_conte 
   Nt.getchildat (j); 
   Boolean Ischeck; 
   if (j = = tab_postion) {Ischeck = true; 
   else {Ischeck = false; 
  } checkview.setselected (Ischeck); 
  }/** * Initialize fragment */private void initfragment () {int count = News.length; 
   for (int i = 0; i< count;i++) {Bundle data = new Bundle (); 
   Data.putstring ("text", News[i]); 
   Newsfragment newfragment = new Newsfragment (); 
   Newfragment.setarguments (data); 
  Fragments.add (newfragment); 
  } newsfragmentpageradapter madapetr = new Newsfragmentpageradapter (Getsupportfragmentmanager (), fragments); 
  Mviewpager.setadapter (MADAPETR); Mviewpager.setonpagechangelisteneR (Pagelistener); /** * Viewpager Switch Listening method */public Viewpager.onpagechangelistener pagelistener= new Viewpager.onpagechangeliste NER () {@Override public void onpagescrollstatechanged (int arg0) {} @Override public void Onpagescrolle d (int arg0, float arg1, int arg2) {} @Override public void onpageselected (int position) {//TODO Auto-gen 
   erated method Stub mviewpager.setcurrentitem (position); 
  Selecttab (position); 
 
 
} 
 };  }

Actiivty_top_news.xml

<linearlayout 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:o" rientation= "vertical" > <linearlayout android:layout_width= "match_parent" android:layout_height= "40.0dip "Android:background=" #fff3f3f3 "android:orientation=" horizontal "> <relativelayout android:id=" @+id/ Rl_column "android:layout_width=" match_parent "android:layout_height=" 40.0dip "android:layout_weight=" 1.0 " 
 
   ; <cn.com.topnews.ui.columnhorizontalscrollview android:id= "@+id/mcolumnhorizontalscrollview" Android:layout_wi 
     Dth= "Match_parent" android:layout_height= "40.0dip" android:scrollbars= "None" > <linearlayout 
     Android:id= "@+id/mradiogroup_content" android:layout_width= "fill_parent" android:layout_height= "40.0dip" Android:layout_centervertical= "true" anDroid:gravity= "center_vertical" android:orientation= "horizontal" android:paddingleft= "10.0dip" android:p addingright= "10.0dip"/> </cn.com.topnews.ui.ColumnHorizontalScrollView> <imageview android:id= "@+id/shade_left" android:layout_width= "10.0dip" android:layout_height= "40.0dip" android:layout_alignparent Left= "true" android:layout_centervertical= "true" android:background= "@drawable/channel_leftblock" android:v isibility= "Gone"/> <imageview android:id= "@+id/shade_right" android:layout_width= "10.0dip" and roid:layout_height= "40.0dip" android:layout_alignparentright= "true" android:layout_centervertical= "true" an droid:background= "@drawable/channel_rightblock" android:visibility= "visible"/> </RelativeLayout> &l T LinearLayout android:id= "@+id/ll_more_columns" android:layout_width= "wrap_content" android:layout_height= "40.0 Dip "> <imAgeview android:id= "@+id/button_more_columns" android:layout_width= "40.0dip" android:layout_height= "40.0dip "Android:layout_gravity=" center_vertical "android:src=" @drawable/channel_glide_day_bg "/> </LinearLayo ut> </LinearLayout> <view android:id= "@+id/category_line" android:layout_width= "Fill_parent" an droid:layout_height= "0.5dip" android:background= "#ffdddddd"/> <android.support.v4.view.viewpager android: Id= "@+id/mviewpager" android:layout_width= "match_parent" android:layout_height= "match_parent"/> </LinearLa  Yout>

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.