商城开发之自定义头部TabHost和底部ToolBar

先附上效果图

ezgif-3-8ac43fbfea.gif

  • 底部导航栏

以前用过LinearLayout+Fragment和TabHost+Activity,感觉用起来很麻烦,正好学习到FragmentTabHost+Fragment,就拿来活学活用,还真提莫好用

官方v4包中的FragmentTabHost会导致Fragment不重用,每次选择tab后都会重建一个,所以在网上找了个优化了的 FragmentTabHost

1.主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="chong.myshop.MainActivity">

    <!--<chong.myshop.view.MyToolBar-->
    <!--android:id="@+id/toolbar"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="wrap_content"-->
    <!--android:background="?attr/colorPrimary"-->
    <!--android:minHeight="?actionBarSize"-->
    <!--app:leftButtonIcon="@drawable/icon_back_32px"-->
    <!--app:showSearchView="true"-->
    <!--app:myTitle="首页"-->
    <!--/>-->

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/bg_color" />

    <chong.myshop.view.FragmentTabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />

    </chong.myshop.view.FragmentTabHost>
</LinearLayout>

其中realtabcontent是要绑定显示Fragment的
而写法怪怪的tabcontent是官方要求

2.新建一个Tab的bean类,其中包含title,icon,fragment属性并调出setter和getter方法(as快捷键是Alt+Insert),new出五个tab然后放入Tabs数组(下面有几个tab就new几个)

package chong.myshop.bean;

/**
 * Created by chong on 2017/5/3.
 */

public class Tab {
    private int title;
    private int icon;
    private Class fragment;

    public Tab (int title,int icon,Class fragment){
        this.fragment=fragment;
        this.title=title;
        this.icon=icon;
    }

    public int getTitle() {
        return title;
    }

    public void setTitle(int title) {
        this.title = title;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public Class getFragment() {
        return fragment;
    }

    public void setFragment(Class fragment) {
        this.fragment = fragment;
    }
}

//新建
Tab home=new Tab(R.string.home,R.drawable.selector_icon_home, HomeFragment.class);
Tab hot=new Tab(R.string.hot,R.drawable.selector_icon_hot, HotFragment.class);
Tab category=new Tab(R.string.category,R.drawable.selector_icon_category, CategoryFragment.class);
Tab cart=new Tab(R.string.cart,R.drawable.selector_icon_cart, CartFragment.class);
Tab mine=new Tab(R.string.mine,R.drawable.selector_icon_mine, MineFragment.class);

其中第二个参数为R.drawable.selector_icon_home,
因为tab中的图标也有几种状态,所以我们得再drawable里面新建五个selector来实现不同状态下的不同图片.五个Fragment目前只是背景颜色不一样.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--没有焦点-->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_cart" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_cartfill_press" />
    <!--有焦点-->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_cartfill_press" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_cartfill_press" />
    <!--按下-->
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_cartfill_press" />
    <item android:state_pressed="true" android:drawable="@mipmap/icon_cartfill_press" />
</selector>

//放入数组
private List<Tab> tabs =new ArrayList<>(5);
tabs.add(home);
tabs.add(hot);
 tabs.add(category);
 tabs.add(cart);
 tabs.add(mine);

3.新建5个TabSpec，并且设置好它的Indicator,再把五个TabSpec放到TabHost中

 myFragmentTabHost.setup(context,getSupportFragmentManager(),R.id.realtabcontent);
  for (Tab tab:tabs){
            TabHost.TabSpec tabSpec=myFragmentTabHost.newTabSpec(getString(tab.getTitle()));
            View view=mInflater.inflate(R.layout.tab_indicator,null);
            TextView title= (TextView) view.findViewById(R.id.tab_title);
            ImageView icon= (ImageView) view.findViewById(R.id.tab_icon);
            title.setText(tab.getTitle());
            icon.setBackgroundResource(tab.getIcon());
            tabSpec.setIndicator(view);
            myFragmentTabHost.addTab(tabSpec,tab.getFragment(),null);
        }

别忘了

//设置第一页
myFragmentTabHost.setCurrentTab(0);

其中tab_indicator.xml代码就是一个图片下面一个文字

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="3dp"
    android:paddingTop="3dp"
    android:gravity="center"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_marginTop="5dp"
        android:layout_width="20dp"
        android:layout_height="20dp" />

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:textColor="@color/selector_tab_text"
        />

</LinearLayout>

注意的是TextView的颜色得根据各种点击状态来改变,所以在color设置了selector ,具体操作就是在res文件目录下新建color文件夹,再新建selector_tab_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#eb4f38" />
    <item android:state_active="true" android:color="#eb4f38"/>
    <item android:state_selected="false" android:color="#a9b7b7" />
    <item android:state_active="false" android:color="#a9b7b7"/>
</selector>

到这里底部导航栏基本已经完成,来看看效果

ezgif-3-dbb36fb5b7.gif

  • 接下来写头部ToolBar

我们的效果是头部的标题和搜索框能随时切换,而原生的ToolBar是没有搜索框的,所以我们只能自定义一个

先在layout中写toolbar.xml样式,由于左边和右边都有一个ImageView,而中间是一个EditiView和TextView相互切换,所以我们只要使用相对布局,而EditView和TextView互相隐藏和显示的就行了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:paddingRight="10dp"
    android:paddingLeft="10dp">

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        style="@style/Base.Widget.AppCompat.Toolbar.Button.Navigation"
        android:id="@+id/toolbar_left_image"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        />

    <ImageView
        style="@style/Base.Widget.AppCompat.Toolbar.Button.Navigation"
        android:id="@+id/toolbar_right_image"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        />

    <EditText
        android:background="@color/brown"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:id="@+id/toolbar_searchview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入搜索内容"
        android:textSize="15sp"
        android:gravity="center"
        android:drawableLeft="@mipmap/icon_search"
        android:layout_toRightOf="@+id/toolbar_left_image"
        android:layout_toLeftOf="@+id/toolbar_right_image"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        style="@style/search_view"

        />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@+id/toolbar_left_image"
        android:layout_toLeftOf="@+id/toolbar_right_image"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20sp"

        />
</RelativeLayout>

其中EditView的style如下

 <style name="search_view">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorHint">@color/white</item>
        <item name="android:background">@drawable/selector_search_view</item>
        <item name="android:paddingTop">6dp</item>
        <item name="android:paddingBottom">6dp</item>
        <item name="android:paddingLeft">4dp</item>
        <item name="android:singleLine">true</item>
    </style>

而EditView也有不同状态下的监听,所以在background我们引入了@drawable/selector_search_view

<?xml version="1.0" encoding="utf-8"?>

    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false" >
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#eb4f38" />
            </shape>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#eb4f38" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#D82917" />
            </shape>
        </item>
    </selector>

接下来写MyToolBar类

  • 新建并继承ToolBar
  • 三个构造方法中我们要让它无论如何都是调用的第三个(也就是三个参数那个)方法,只需要
public MyToolBar(Context context) {
        this(context, null, 0);
    }

    public MyToolBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
}
  • 基本思路就是把toolbar.xml利用原生的addView方法加到MyToolbar
    然后增加自定义属性,values中新建attrrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="MyToolBar">
        <attr name="showSearchView" format="boolean"/>
        <attr name="leftButtonIcon" format="reference"/>
        <attr name="rightButtonIcon" format="reference"/>
        <attr name="myTitle" format="string"/>
    </declare-styleable>
</resources>

然后在构造方法中用TypedArray拿到attrs中的属性,
在封装不同状态的各个控件的隐藏与否
最后给各个控件增加监听,代码很简单,就直接贴上

package chong.myshop.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toolbar;
import chong.myshop.R;

/**
 * Created by chong on 2017/5/3.
 */

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public class MyToolBar extends Toolbar {

    private TextView toolbar_title;
    private EditText toolbar_searchview;
    private ImageView toolbar_leftButton;
    private ImageView toolbar_rightButton;
    private View myView;
    private boolean showSearchView;
    private Drawable left_button_icon;
    private Drawable right_button_icon;
    private String title;


    public MyToolBar(Context context) {
        this(context, null, 0);
    }

    public MyToolBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyToolBar,
                defStyleAttr, 0);

        showSearchView = a.getBoolean(R.styleable.MyToolBar_showSearchView, false);
        left_button_icon = a.getDrawable(R.styleable.MyToolBar_leftButtonIcon);
        right_button_icon = a.getDrawable(R.styleable.MyToolBar_rightButtonIcon);
        title = a.getString(R.styleable.MyToolBar_myTitle);

        a.recycle();

        iniView();


    }


    private void iniView() {
        if (myView == null) {
            myView = View.inflate(getContext(), R.layout.toolbar, null);

            toolbar_rightButton = (ImageView) myView.findViewById(R.id.toolbar_right_image);
            toolbar_leftButton = (ImageView) myView.findViewById(R.id.toolbar_left_image);
            toolbar_searchview = (EditText) myView.findViewById(R.id.toolbar_searchview);
            toolbar_title = (TextView) myView.findViewById(R.id.toolbar_title);

            addView(myView);

            if (showSearchView) {
                showSearchView();
                hideTitle();
            } else {
                showTitle();
                hideSearchView();
                if (title != null) {
                    toolbar_title.setText(title);
                }
            }
            if (left_button_icon != null) {
                toolbar_leftButton.setImageDrawable(left_button_icon);
            }
            if (right_button_icon != null) {
                toolbar_rightButton.setImageDrawable(right_button_icon);
            }


            initLinstener();
        }
    }


    /**
     * 标题与搜索框的切换
     */
    public void setShowSearchView() {
        hideTitle();
        showSearchView();
    }

    public void setShowTitleView(String title) {
        hideSearchView();
        showTitle();
        toolbar_title.setText(title);
    }

    /**
     * 设置左右按钮的图标
     *
     * @param d
     */
    public void setLeftButtonIconDrawable(Drawable d) {
        toolbar_leftButton.setImageDrawable(d);
    }

    public void setRightButtonIconDrawable(Drawable d) {
        toolbar_rightButton.setImageDrawable(d);
    }

    public void hideSearchView() {
        toolbar_searchview.setVisibility(GONE);
    }

    public void showSearchView() {
        toolbar_searchview.setVisibility(VISIBLE);
    }

    public void hideTitle() {
        toolbar_title.setVisibility(GONE);
    }

    public void showTitle() {
        toolbar_title.setVisibility(VISIBLE);
    }

    @Override
    public void setTitle(int resId) {
        toolbar_title.setText(getContext().getText(resId));

    }

    @Override
    public void setTitle(CharSequence title) {
        toolbar_title.setText(title);
    }

    private OnLeftButtonOnClickListener onLeftButtonOnClickListener;
    private OnRightButtonOnClickListener onRightButtonOnClickListener;


    private void initLinstener() {
        toolbar_rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onRightButtonOnClickListener != null) {
                    onRightButtonOnClickListener.onClick();
                }
            }
        });

        toolbar_leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onLeftButtonOnClickListener != null) {
                    onLeftButtonOnClickListener.onClick();
                }
            }
        });
    }

    public void setLeftButtonClick(OnLeftButtonOnClickListener listener) {
        onLeftButtonOnClickListener = listener;
    }

    public void setRightButtonClick(OnRightButtonOnClickListener listener) {
        onRightButtonOnClickListener = listener;
    }


    public interface OnLeftButtonOnClickListener {
        void onClick();
    }

    public interface OnRightButtonOnClickListener {
        void onClick();
    }
}

最后把上面layout_main.xml中的MyToolBar取消注释,运行,大功告成

由于昨天在layout中引用app命名空间的时候手懒复制错了

xmlns:app="http://schemas.android.com/tools"
xmlns:tools="http://schemas.android.com/tools"

导致头部的图片和文字都不显示,
结果找这个问题花了三四个小时,
找出来后舒畅的喊了一声cao.

做完感觉原生的图标很丑,然后在网上找了个

my_icon.png

又舒畅不不少

公司电脑垃圾,没上传git

好了,撸代码去了

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,907评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,987评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,298评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,586评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,633评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,488评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,275评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,176评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,619评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,655评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,265评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2赞 354

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,129评论 25赞 707
  • Android（一）
    原文地址：http://www.android100.org/html/201606/06/241682.html...
    AFinalStone阅读 926评论 0赞 1
  • 悲伤从何而来
    本来是记得今天是我的生日的，而且是在国外度过的第一个生日！可出差日程推到明天了（晚了一个星期），这几天忙的也没顾这...
    FutureToken阅读 790评论 1赞 1
  • 中考满分作文指导
    第一节 满分作文的特点 “中考满分作文不是没有缺点的，但肯定是有特点的！” 深圳中考作文从2001年《小楼昨夜又东...
    沪江中小幼阅读 826评论 0赞 7