先附上效果图
ezgif-3-8ac43fbfea.gif
底部导航栏
以前用过LinearLayout+Fragment和TabHost+Activity,感觉用起来很麻烦,正好学习到FragmentTabHost+Fragment,就拿来活学活用,还真提莫好用
官方v4包中的FragmentTabHost会导致Fragment不重用,每次选择tab后都会重建一个,所以在网上找了个优化了的 FragmentTabHost
1.主布局文件
其中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目前只是背景颜色不一样.
//放入数组
private List 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代码就是一个图片下面一个文字
注意的是TextView的颜色得根据各种点击状态来改变,所以在color设置了selector ,具体操作就是在res文件目录下新建color文件夹,再新建selector_tab_text.xml
到这里底部导航栏基本已经完成,来看看效果
ezgif-3-dbb36fb5b7.gif
接下来写头部ToolBar
我们的效果是头部的标题和搜索框能随时切换,而原生的ToolBar是没有搜索框的,所以我们只能自定义一个
先在layout中写toolbar.xml样式,由于左边和右边都有一个ImageView,而中间是一个EditiView和TextView相互切换,所以我们只要使用相对布局,而EditView和TextView互相隐藏和显示的就行了
其中EditView的style如下
而EditView也有不同状态下的监听,所以在background我们引入了@drawable/selector_search_view
-
-
-
接下来写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
然后在构造方法中用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
好了,撸代码去了