天天看点

仿今日头条顶部导航效果

 之前发现很多人在群里面、论坛上求网易新闻客户端的源码,之后我就去下了个网易新闻客户端和今日头条新闻客户端,发现他们的大体是一样的,于是在最近的空闲时间,便去琢磨如何去实现这样一个app。

只是一般的apk打包后都是被混淆过的,所以没那么好了解他的每个界面是如何实现的,没事,那就自己慢慢摸索或则从它的资源文件中提取布局了解下整体的大概情况。

我通过反编译 --今日头条:

仿今日头条顶部导航效果

知道了它用到的架包有,提取了有用的部分:

1.android-support-v4.jar (最常用的官方架包之一)

2.android-support-v7.jar (主要用于actionbar的低版本兼容)

3.handmark.pulltorefresh.library  (图片的下拉刷新包)

4.slidingmenu.lib  (侧拉菜单包)  

5.umeng (友盟的官方架包)

自己要在加用上的架包有:

注:发现架包中有aaa什么的命名,说明它被混淆过,所以要想进一步获取它的源码很困难,只能按照自己的思路去走。

好的,大体了解了它的整体结构,下面就开始它是如何开发的把:

注:本代码内用到的资源文件和属性配置部分从apk反编译的资源(src文件)中提取,为了达到更好的实现效果。

一.首先构建大体的框架,架包等用到的时候在导入

仿今日头条顶部导航效果

二.进行配置

首先去掉应用的title栏目:

采取修改androidmanifest.xml文件中application的android:theme="@style/apptheme"属性:

仿今日头条顶部导航效果

<style name="apptheme" parent="appbasetheme">  

    <item name="android:windownotitle">true</item>  

</style>  

三.开始开发

设置欢迎界面的调整动画,2秒

仿今日头条顶部导航效果

  start_anima = new alphaanimation(0.3f, 1.0f);  

start_anima.setduration(2000);  

view.startanimation(start_anima);  

start_anima.setanimationlistener(new animationlistener() {  

    @override  

    public void onanimationstart(animation animation) {  

        // todo auto-generated method stub  

    }  

    public void onanimationrepeat(animation animation) {  

    public void onanimationend(animation animation) {  

        redirectto();//跳转  

});  

之后便是主界面:

可以发现主界面上方的栏目栏是可以横向拖动的,并且选择。

仿今日头条顶部导航效果

下面就首先来实现上部栏目拖动这个效果:

大体思路结构图:

仿今日头条顶部导航效果

整体的布局文件是如下这样:

仿今日头条顶部导航效果

<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" >  

    <include layout="@layout/main_head" />  

    <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" >  

            <com.topnews.view.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" />  

            </com.topnews.view.columnhorizontalscrollview>  

            <imageview  

                android:id="@+id/shade_left"  

                android:layout_width="10.0dip"  

                android:layout_alignparentleft="true"  

                android:layout_centervertical="true"  

                android:background="@drawable/channel_leftblock"  

                android:visibility="gone" />  

                android:id="@+id/shade_right"  

                android:layout_alignparentright="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" >  

                android:id="@+id/button_more_columns"  

                android:layout_width="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_height="match_parent" />  

</linearlayout>  

由于发现horizontalscrollview左右拖动的时候没有那种阴影效果,所以在这里,我们发现了头条的资源文件下有这么2个文件:

仿今日头条顶部导航效果

这个就是它在白天模式和黑夜模式下用的阴影图片。那我们可以采取重写horizontalscrollview来判断滚动,如果滚动时候不是在最左边,显示左边阴影,不是在最右边,显示右边阴影。

仿今日头条顶部导航效果

public class columnhorizontalscrollview extends horizontalscrollview {  

    /** 传入整体布局  */  

    private view ll_content;  

    /** 传入更多栏目选择布局 */  

    private view ll_more;  

    /** 传入拖动栏布局 */  

    private view rl_column;  

    /** 左阴影图片 */  

    private imageview leftimage;  

    /** 右阴影图片 */  

    private imageview rightimage;  

    /** 屏幕宽度 */  

    private int mscreenwitdh = 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);  

    /**  

     * 在拖动的时候执行 

     * */  

    protected void onscrollchanged(int paramint1, int paramint2, int paramint3, int paramint4) {  

        super.onscrollchanged(paramint1, paramint2, paramint3, paramint4);  

        shade_showorhide();  

        if(!activity.isfinishing() && ll_content !=null && leftimage!=null && rightimage!=null && ll_more!=null && rl_column !=null){  

            if(ll_content.getwidth() <= mscreenwitdh){  

                leftimage.setvisibility(view.gone);  

                rightimage.setvisibility(view.gone);  

            }  

        }else{  

            return;  

        }  

        if(paramint1 ==0){  

            leftimage.setvisibility(view.gone);  

            rightimage.setvisibility(view.visible);  

        if(ll_content.getwidth() - paramint1 + ll_more.getwidth() + rl_column.getleft() == mscreenwitdh){  

            leftimage.setvisibility(view.visible);  

            rightimage.setvisibility(view.gone);  

        leftimage.setvisibility(view.visible);  

       <span style="white-space:pre">   </span>rightimage.setvisibility(view.visible);  

     * 传入父类布局中的资源文件 

    public void setparam(activity activity, int mscreenwitdh,view paramview1,imageview paramview2, imageview paramview3 ,view paramview4,view paramview5){  

        this.activity = activity;  

        this.mscreenwitdh = mscreenwitdh;  

        ll_content = paramview1;  

        leftimage = paramview2;  

        rightimage = paramview3;  

        ll_more = paramview4;  

        rl_column = paramview5;  

     * 判断左右阴影的显示隐藏效果 

    public void shade_showorhide() {  

        if (!activity.isfinishing() && ll_content != null) {  

            measure(0, 0);  

            //如果整体宽度小于屏幕宽度的话,那左右阴影都隐藏  

            if (mscreenwitdh >= getmeasuredwidth()) {  

        } else {  

        //如果滑动在最左边时候,左边阴影隐藏,右边显示  

        if (getleft() == 0) {  

        //如果滑动在最右边时候,左边阴影显示,右边隐藏  

        if (getright() == getmeasuredwidth() - mscreenwitdh) {  

        //否则,说明在中间位置,左、右阴影都显示  

        rightimage.setvisibility(view.visible);  

}  

之后

private arraylist<newsclassify> newsclassify=new arraylist<newsclassify>();

根据newsclassify这个栏目分类列表里面的数量进行添加栏目。(这里首先采用了自己限定的item,而没有进行数据库的操作,以后加上)

viewpage的适配器newsfragmentpageradapter,通过viewpage切换对应栏目的的fragment:

仿今日头条顶部导航效果

public class newsfragmentpageradapter extends fragmentpageradapter {  

    private arraylist<fragment> fragments;  

    private fragmentmanager fm;  

    public newsfragmentpageradapter(fragmentmanager fm) {  

        super(fm);  

        this.fm = fm;  

    public newsfragmentpageradapter(fragmentmanager fm,  

            arraylist<fragment> fragments) {  

        this.fragments = fragments;  

    public int getcount() {  

        return fragments.size();  

    public fragment getitem(int position) {  

        return fragments.get(position);  

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

        notifydatasetchanged();  

    public object instantiateitem(viewgroup container, final int position) {  

        object obj = super.instantiateitem(container, position);  

        return obj;  

之后添加栏目item:

仿今日头条顶部导航效果

int count =  newsclassify.size();  

    for(int i = 0; i< count; i++){  

        linearlayout.layoutparams params = new linearlayout.layoutparams(mitemwidth , 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(newsclassify.get(i).gettitle());  

        localtextview.settextcolor(getresources().getcolorstatelist(r.color.top_category_scroll_text_color_day));  

        if(columnselectindex == i){  

            localtextview.setselected(true);  

        localtextview.setonclicklistener(new 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);  

                      }  

                  }  

                  toast.maketext(getapplicationcontext(), newsclassify.get(v.getid()).gettitle(), toast.length_short).show();  

        });  

        mradiogroup_content.addview(localtextview, i ,params);  

之后根据选择栏目的来调整columnhorizontalscrollview中的位置

仿今日头条顶部导航效果

<span style="white-space:pre">  </span>/**  

     *  选择的column里面的tab 

    private void selecttab(int tab_postion) {  

        columnselectindex = 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;  

            // rg_nav_content.getparent()).smoothscrollto(i2, 0);  

            mcolumnhorizontalscrollview.smoothscrollto(i2, 0);  

            // mcolumnhorizontalscrollview.smoothscrollto((position - 2) *  

            // mitemwidth , 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);  

完成的效果如下:

仿今日头条顶部导航效果

更多注释和实现方法可以查看demo源码文件,源码下载地址 :

继续阅读