Android仿新闻顶部导航标签切换效果

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。

那么大致上我们会用到这些知识。
1.Fragment
2.FragmentPagerAdapter
3.HorizontalScrollView
4.PopupWindow
ok,那么首先进入第一步。
为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了。所以这里就自定义一个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;/*** 自定义垂直滑动View**/public class ColumnHorizontalScrollView extends HorizontalScrollView {//传入的布局private View ll_content;//更多栏目的布局private View ll_more;//拖动栏布局private View rl_colnmn;//左阴影布局private ImageView leftImage;//右阴影布局private ImageView rightImage;//屏幕宽度private int mScreenWidth =0;//父类活动的activityprivate Activity activity;public ColumnHorizontalScrollView（Context context） { super（context）;} public ColumnHorizontalScrollView（Context context, AttributeSet attrs） { super（context, attrs）;} public ColumnHorizontalScrollView（Context context, AttributeSet attrs, int defStyle） { super（context, attrs, defStyle）; } /** * 拖动的时候执行的事件 * @param l * @param t * @param oldl * @param oldt */@Overrideprotected void onScrollChanged（int l, int t, int oldl, int oldt） { super.onScrollChanged（l, t, oldl, oldt）; //先设置左右的阴影 shade_ShowOrHide（）; if（！activity.isFinishing（） && ll_content ！= null && leftImage！= null && rightImage ！= null）{if（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）;} /** * 传入父类的资源文件等 * @param activity * @param mScreenWidth * @param paramView1 * @param paramView2 * @param paramView3 * @param paramView4 * @param paramView5 */public void setParam（Activity activity,int mScreenWidth,View paramView1,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;}/** * 判断左右阴影显示隐藏效果 */public void shade_ShowOrHide（）{ if（！activity.isFinishing（） && ll_content ！= null）{measure（0,0）;//如果整体的宽度小于屏幕的宽度的话,那左右阴影都隐藏if（mScreenWidth >= getMeasuredWidth（））{ leftImage.setVisibility（View.GONE）; rightImage.setVisibility（View.GONE）;} }else {return ; } //如果滑动到最左边的时候,左边阴影隐藏,右边显示 if（getLeft（） == 0）{leftImage.setVisibility（View.GONE）;rightImage.setVisibility（View.VISIBLE）;return ; } //如果滑动在最右边的时候,左边阴影显示,右边隐藏 if（getRight（） == getMeasuredWidth（） - mScreenWidth）{leftImage.setVisibility（View.VISIBLE）;rightImage.setVisibility（View.GONE）;return ; } //否则,说明在中间位置,左右阴影都显示 leftImage.setVisibility（View.VISIBLE）; rightImage.setVisibility（View.VISIBLE）;} }

完成之后，是不是需要编写Fragment 了? 为了显示图中的效果,这里我们就自定义一个,方便控制

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; /*** 自定义的Fragment类*/public class NewsFragment extends Fragment {String text; @Overridepublic void onCreate（Bundle savedInstanceState） { Bundle args = getArguments（）; text = args ！= null ? args.getString（"text"）:""; super.onCreate（savedInstanceState）;} @Nullable@Overridepublic 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,为了方便控制,我们来写个适配器

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;/*** 消息 Fragment 的适配器*/public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {private ArrayList<Fragment> fragments;//定义一个集合管理所有的fragment private FragmentManager fm;//fragment 管理器 public NewsFragmentPagerAdapter（FragmentManager fm, ArrayList<Fragment> fragments） { super（fm）; this.fm = fm; this.fragments = fragments;}@Overridepublic int getCount（） { return fragments.size（）;} @Overridepublic android.support.v4.app.Fragment getItem（int position） { return fragments.get（position）;} @Overridepublic int getItemPosition（Object object） { return POSITION_NONE;} //设置集合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（）;} @Overridepublic Object instantiateItem（ViewGroup container, int position） { Object obj = super.instantiateItem（container, position）; return obj;} }

完成这些,就差不多开始编写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 {/**自定义的HorizontalScrollView**/private ColumnHorizontalScrollView 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"};//当前选中的栏目private int colnmuSelectIndex = 0;//左阴影部分public ImageView shade_left;//右阴影部分public ImageView shade_right;//屏幕宽度private int mScreenWidth = 0; //Item 的高度private int mItemWidth = 0; private ArrayList<Fragment> fragments = new ArrayList<>（）; @Overrideprotected 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;// 一个Item宽度为屏幕的1/7 intiViews（）;}private final int SWITCH_PAGE = 0x00123; private Handler mHandler = new Handler（）{ @Override public void handleMessage（Message 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;} }};/** * 初始化组件 */protected void intiViews（） { mColumnHorizontalScrollView = （ColumnHorizontalScrollView）findViewById（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（） {@Overridepublic void onClick（View v） { // TODO Auto-generated method stub} }）; setChangelView（）;}/** * 当栏目项发生变化时候调用 * */private void setChangelView（） { // initColumnData（）; initTabColumn（）; initFragment（）;}/** * 初始化Column栏目项 * */private void initTabColumn（） { //先删除所有的控件 mRadioGroup_content.removeAllViews（）; //获取所有的结合 int count = news.length; //设置自定义的所有布局 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 , ViewPager.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）;}/** * 设置点击事件 */localTextView.setOnClickListener（new View.OnClickListener（） { @Override public void onClick（View v） {for（int i = 0;i < mRadioGroup_content.getChildCount（）;i++）{ View localView = mRadioGroup_content.getChildAt（i）; if （localView ！= v）localView.setSelected（false）; else{localView.setSelected（true）;mViewPager.setCurrentItem（i）; }} }}）;mRadioGroup_content.addView（localTextView, i ,params）; }}/** * 选择的Column里面的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）; } //判断是否选中 for （int j = 0; j < mRadioGroup_content.getChildCount（）; j++） {View checkView = mRadioGroup_content.getChildAt（j）;boolean ischeck;if （j == tab_postion） { ischeck = true;} else { ischeck = false;}checkView.setSelected（ischeck）; }}/** * 初始化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切换监听方法 * */public ViewPager.OnPageChangeListener pageListener= new ViewPager.OnPageChangeListener（）{@Override public void onPageScrollStateChanged（int arg0） { }@Override public void onPageScrolled（int arg0, float arg1, int arg2） { }@Override public void onPageSelected（int position） {// TODO Auto-generated method stubmViewPager.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:orientation="vertical" ><LinearLayout android:layout_width="match_parent" android:layout_height="40.0dip" android:background="#fff3f3f3" android:orientation="horizontal" ><RelativeLayoutandroid: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_width="match_parent" android:layout_height="40.0dip" android:scrollbars="none" ><LinearLayoutandroid: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:paddingRight="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_alignParentLeft="true" android:layout_centerVertical="true" android:background="@drawable/channel_leftblock" android:visibility="gone" /> <ImageView android:id="@+id/shade_right" android:layout_width="10.0dip" android:layout_height="40.0dip" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@drawable/channel_rightblock" android:visibility="visible" /> </RelativeLayout><LinearLayoutandroid:id="@+id/ll_more_columns"android:layout_width="wrap_content"android:layout_height="40.0dip" > <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" /> </LinearLayout></LinearLayout> <View android:id="@+id/category_line" android:layout_width="fill_parent" android: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" /></LinearLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。