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
好了,撸代码去了
网友评论