Android实现类似网易新闻选项卡动态滑动效果

这篇文章主要介绍了Android实现类似网易新闻选项卡动态滑动效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

 本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果。

首先来看看布局,就是用HorizontalScrollView控件来实现滑动的效果,里面包含了一个布局。

接下来我们在onCreat方法中加载布局和构建我们需要显示的数据

  @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("推荐"); titleList.add("热点"); titleList.add("北京"); titleList.add("体育"); titleList.add("娱乐"); titleList.add("足球"); titleList.add("巴萨"); titleList.add("汽车"); }

加载布局,用RadioGroup动态的加载多个自定义的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); //选项卡布局 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 

最后也就点击选项卡的时候会有一个动态滑动的效果,其实就是利用HorizontalScrollView的smoothScrollTo方法来实现的

  myRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { int radioButtonId = group.getCheckedRadioButtonId(); //根据ID获取RadioButton的实例 RadioButton rb = (RadioButton) findViewById(radioButtonId); channel = (String) rb.getTag(); mCurrentCheckedRadioLeft = rb.getLeft();//更新当前按钮距离左边的距离 int width=(int) SizeHelper.dp2px(TabbarActivity.this, 140); hs_activity_tabbar.smoothScrollTo((int) mCurrentCheckedRadioLeft - width, 0); tv_tabname.setText(channel); } }); //设定默认被选中的选项卡为第一项 if (!titleList.isEmpty()) { myRadioGroup.check(myRadioGroup.getChildAt(0).getId()); }

dp2px方法如下用来将dp转换为px:

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

全部代码为:

 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 ll_activity_tabbar_content; private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离 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("推荐"); titleList.add("热点"); titleList.add("北京"); titleList.add("体育"); titleList.add("娱乐"); titleList.add("足球"); titleList.add("巴萨"); titleList.add("汽车"); 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); //选项卡布局 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 

来看看效果

这里写图片描述

以上就是Android实现类似网易新闻选项卡动态滑动效果的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动