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;
    //父类活动的activity
    private 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
     */
    @Override
    protected 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;

    @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,为了方便控制,我们来写个适配器

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;
    }
    @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 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();
    }

    @Override
    public 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<>();

    @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;// 一个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() {
            @Override
            public 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 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:orientation="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_width="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: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>

        <LinearLayout
            android: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>

代码所在位置:GitHub