Android tab Dynamic Sliding Effect

Android tab Dynamic Sliding Effect

This article will achieve a similar Netease News (not to mention Netease news, you may not know what it looks like) Click on a large number of tabs to dynamically slide the results.
First, let's take a look at the layout. It uses the HorizontalScrollView control to achieve the sliding effect, which contains a layout.

Next we will load the layout and construct the data we need to display in the onCreat method.

@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_tabbar); TV _tabname = (TextView) this. findViewById (R. id. TV _tabname); titleList = new ArrayList
  
   
(); TitleList. add ("recommended"); titleList. add ("Hotspot"); titleList. add ("Beijing"); titleList. add ("Sports"); titleList. add ("Entertainment"); titleList. add ("soccer"); titleList. add ("Barcelona"); titleList. add ("Auto ");}
  

Load the layout and use RadioGroup to dynamically load multiple custom RadioButton

Hs_activity_tabbar = (HorizontalScrollView) this. findViewById (R. id. hs_activity_tabbar); ll_activity_tabbar_content = (LinearLayout) this. findViewById (R. id. ll_activity_tabbar_content); // tab layout myRadioGroup = new RadioGroup (this); myRadioGroup. setLayoutParams (new ViewGroup. layoutParams (ViewGroup. layoutParams. MATCH_PARENT, ViewGroup. layoutParams. MATCH_PARENT); myRadioGroup. setOrientation (LinearLayout. HORIZONTAL); ll_activity_tabbar_content.addView (myRadioGroup); for (int I = 0; I <titleList. size (); I ++) {String channel = titleList. get (I); RadioButton radio = new RadioButton (this); radio. setButtonDrawable (android. r. color. transparent); radio. setBackgroundResource (R. drawable. radiobtn_selector); ColorStateList csl = getResources (). getColorStateList (R. color. radiobtn_text_color); radio. setTextColor (csl); LinearLayout. layoutParams l = new LinearLayout. layoutParams (int) SizeHelper. dp2px (this, 80), ViewGroup. layoutParams. MATCH_PARENT, Gravity. CENTER); radio. setLayoutParams (l); radio. setTextSize (15); radio. setGravity (Gravity. CENTER); radio. setText (channel); radio. setTag (channel); myRadioGroup. addView (radio );}

Finally, when you click a tab, it will have a dynamic sliding effect, which is actually implemented by using the smoothScrollTo method of HorizontalScrollView.

MyRadioGroup. setOnCheckedChangeListener (new RadioGroup. onCheckedChangeListener () {@ Override public void onCheckedChanged (RadioGroup group, int checkedId) {int radioButtonId = group. getCheckedRadioButtonId (); // obtain the RadioButton instance RadioButton rb = (RadioButton) findViewById (radioButtonId); channel = (String) rb Based on the ID. getTag (); mCurrentCheckedRadioLeft = rb. getLeft (); // update the distance from the current button to the left int width = (int) Size Helper. dp2px (TabbarActivity. this, 140); hs_activity_tabbar.smoothScrollTo (int) mCurrentCheckedRadioLeft-width, 0); TV _tabname.setText (channel) ;}); // set the Selected tab as the first option if (! TitleList. isEmpty () {myRadioGroup. check (myRadioGroup. getChildAt (0). getId ());}

The dp2px method is used to convert dp to px as follows:

 public static float dp2px(Context context, float dp) {        final float scale = context.getResources().getDisplayMetrics().density;        return (dp * scale);    }

All code:

Package com. example. liuwangshu. myslidetabbar; import android. content. res. colorStateList; import android. support. v7.app. appCompatActivity; import android. OS. bundle; import android. view. gravity; import android. view. viewGroup; import android. widget. horizontalScrollView; import android. widget. linearLayout; import android. widget. radioButton; import android. widget. radioGroup; import android. widget. textView; import java. util. arrayList; import java. util. list; public class TabbarActivity extends AppCompatActivity {private HorizontalScrollView hs_activity_tabbar; private RadioGroup myRadioGroup; private List
  
   
TitleList; private LinearLayout progress; private float progress; // The distance from the currently selected RadioButton to the left is private String channel; private TextView TV _tabname; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_tabbar); TV _tabname = (TextView) this. findViewById (R. id. TV _tabname); titleList = new ArrayList
   
    
(); TitleList. add ("recommended"); titleList. add ("Hotspot"); titleList. add ("Beijing"); titleList. add ("Sports"); titleList. add ("Entertainment"); titleList. add ("soccer"); titleList. add ("Barcelona"); titleList. add ("car"); initGroup ();} private void initGroup () {hs_activity_tabbar = (HorizontalScrollView) this. findViewById (R. id. hs_activity_tabbar); ll_activity_tabbar_content = (LinearLayout) this. findViewById (R. id. ll_activity_tabbar_content); // Tab Layout myRadioGroup = new RadioGroup (this); myRadioGroup. setLayoutParams (new ViewGroup. layoutParams (ViewGroup. layoutParams. MATCH_PARENT, ViewGroup. layoutParams. MATCH_PARENT); myRadioGroup. setOrientation (LinearLayout. HORIZONTAL); ll_activity_tabbar_content.addView (myRadioGroup); for (int I = 0; I <titleList. size (); I ++) {String channel = titleList. get (I); RadioButton radio = new RadioButton (this); r Adio. setButtonDrawable (android. r. color. transparent); radio. setBackgroundResource (R. drawable. radiobtn_selector); ColorStateList csl = getResources (). getColorStateList (R. color. radiobtn_text_color); radio. setTextColor (csl); LinearLayout. layoutParams l = new LinearLayout. layoutParams (int) SizeHelper. dp2px (this, 80), ViewGroup. layoutParams. MATCH_PARENT, Gravity. CENTER); radio. setLayoutParams (l); radio. SetTextSize (15); radio. setGravity (Gravity. CENTER); radio. setText (channel); radio. setTag (channel); myRadioGroup. addView (radio);} myRadioGroup. setOnCheckedChangeListener (new RadioGroup. onCheckedChangeListener () {@ Override public void onCheckedChanged (RadioGroup group, int checkedId) {int radioButtonId = group. getCheckedRadioButtonId (); // obtain the RadioButton instance RadioButton rb = (RadioButton) findVi Based on the ID. EwById (radioButtonId); channel = (String) rb. getTag (); mCurrentCheckedRadioLeft = rb. getLeft (); // update the distance from the current button to the left int width = (int) SizeHelper. dp2px (TabbarActivity. this, 140); hs_activity_tabbar.smoothScrollTo (int) mCurrentCheckedRadioLeft-width, 0); TV _tabname.setText (channel) ;}); // set the Selected tab as the first option if (! TitleList. isEmpty () {myRadioGroup. check (myRadioGroup. getChildAt (0). getId ());}}}
   
  

To see the effect