1. TabLayout
//布局
<android.support.design.widget.TabLayout
android:id="@+id/tl_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_48"
android:background="@color/blue">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<string-array name="tabIndicatorIcons">
<item>@mipmap/indicator1</item>
<item>@mipmap/indicator2</item>
<item>@mipmap/indicator3</item>
<item>@mipmap/indicator4</item>
</string-array>
<string-array name="tabIndicatorTitles">
<item>1</item>
<item>2</item>
<item>3</item>
<item>4</item>
</string-array>
private void initTab() { viewPager.setOffscreenPageLimit(getResources().getStringArray(R.array.tabIndicatorTitles).length);
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Fragment1();
case 1:
return new Fragment2();
case 2:
return new Fragment3();
case 3:
return new Fragment4();
}
return null;
}
@Override
public int getCount() {
return getResources().getStringArray(R.array.tabIndicatorTitles).length;
}
@Override
public CharSequence getPageTitle(int position) {
return getResources().getStringArray(R.array.tabIndicatorTitles)[position];
}
});
tabLayout.setupWithViewPager(viewPager);
badgeViews = new ArrayList<>();
TypedArray typedArray = getResources().obtainTypedArray(R.array.tabIndicatorIcons);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
//添加自定义的view,定制带图标的 tab.setCustomView(generateTabItemView(tab.getText(), typedArray.getResourceId(i, R.mipmap.ic_launcher)));
}
}
typedArray.recycle();
}
private View generateTabItemView(CharSequence title, int resourceId) {
View inflate = LayoutInflater.from(this).inflate(R.layout.item_main_tab_indicator, null);
TextView tv = (TextView) inflate.findViewById(R.id.tv_main_tab_indicator);
tv.setText(title);
tv.setCompoundDrawablesWithIntrinsicBounds(0, resourceId, 0, 0);
return inflate;
}
改变选中字体的颜色
Tab.setTabTextColors(ContextCompat.getColor(this, R.color.gray), ContextCompat.getColor(this, R.color.white));
前面是没选择颜色,后面是选中的
app:tabSelectedTextColor=”@android:color/holo_orange_light”
改变未选中字体的颜色
app:tabTextColor=”@color/colorPrimary”
设置选中下标颜色
Tab.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.white));
改变指示器下标的颜色
app:tabIndicatorColor=”@android:color/holo_orange_light”
改变整个TabLayout的颜色
app:tabBackground=”color”
改变TabLayout内部字体大小
app:tabTextAppearance=”@android:style/TextAppearance.Holo.Large”//设置文字的外貌
改变指示器下标的高度
app:tabIndicatorHeight=”4dp”
添加图标
tabLayout.addTab(tabLayout.newTab().setText(“Tab 1”).setIcon(R.mipmap.ic_launcher));
内容的显示模式
app:tabGravity=”center”//居中,如果是fill,则是充满
设置Tab的模式:
tabLayout.setTabMode(TabLayout.MODE_FIXED);//充满
app:tabMode=”scrollable”//可滑动
默认选中某项
tablayout.getTabAt(position).select();
给tablayout底部设置阴影
ViewCompat.setElevation(Tab, 20);
2. Snackbar
Snackbar.make(view, message, duration)
.setAction(action message, click listener)
.show();
Snackbar.make(this.findViewById(android.R.id.content), "This is a Snackbar", Snackbar.LENGTH_SHORT)
.setAction("Cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}) .setActionTextColor(getResources().getColor(R.color.red))
.show();
Snackbar snackbar = Snackbar.make(this.findViewById(android.R.id.content), "This is a Snackbar", Snackbar.LENGTH_SHORT)
.setAction("Cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
})
.setActionTextColor(getResources().getColor(R.color.white));
snackbar.getView().setBackgroundColor(getResources().getColor(R.color.red));
snackbar.show();
SnackBar的显示位置
1.当传入的View不为空时,如果我们在布局中发现了CoordinatorLayout布局,那么View就是CoordinatorLayout;
2.如果没有CoordinatorLayout布局,我们就先找到一个id为android.R.id.content的FrameLayout(这个布局是最底层的根布局),将View设置为该FrameLayout;
3.其他情况下就使用View的Parent布局一直到这个View不为空。
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="100dp">
//点击显示Snackbar的按钮
//这样还支持侧滑消失
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?borderlessButtonStyle"
android:text="Snackbar"
android:textAllCaps="false"
android:textSize="@dimen/sp_16"
android:layout_margin="@dimen/dp_16"
android:padding="@dimen/dp_16"
android:onClick="onClickSnackbar"
android:background="@drawable/state_press_white"/>
</android.support.design.widget.CoordinatorLayout>
3. FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_16"
android:onClick="onClickFab"
android:src="@mipmap/ic_toolbar_add"
app:backgroundTint="@color/fab_ripple"//点击颜色
app:rippleColor="#33728dff"//点击是渐变的颜色
app:layout_anchor="@id/vp_content"
app:layout_anchorGravity="bottom|right|end"
app:elevation="6dp"//正常阴影大小
app:pressedTranslationZ="12dp"//点击的阴影大小
app:borderWidth="0dp"/>//解决5.x上没阴影
4. AppBarLayout
功能:让子View(AppBar)可以选择他们自己的滚动行为
注意:需要依赖CoordinatorLayout作为父容器,同时也要求一个具有可以独立滚动的兄弟节点(或兄弟节点的子view可以滚动)才能发挥其功能
5. CoordinatorLayout
从开发文档中可以了解到,CoordinatorLayout是一个增强型的FrameLayout。它的作用有两个。
1 作为一个布局的根布局
2 作为一个为子视图之间相互协调手势效果的一个协调布局
//toolbar中搜索框使用
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_search, menu);
SearchManager searchManager = (SearchManager) getSystemService(Service.SEARCH_SERVICE);
SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
searchView.setSearchableInfo(searchManager.getSearchableInfo(new ComponentName(this, SearchResultActivity.class)));
return true;
}
public class SearchResultActivity extends BaseActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search_result);
mToolbarTb.setTitle(R.string.search_result);
Intent intent = getIntent();
if (Intent.ACTION_SEARCH.equals(intent.getAction())){
ToastUtils.showToast(this, intent.getStringExtra(SearchManager.QUERY));
}
}
}
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_16"
android:src="@mipmap/ic_toolbar_add"
app:layout_anchor="@id/rv_content"
app:layout_anchorGravity="bottom|right"
app:backgroundTint="@color/fab_ripple"
app:layout_behavior=".behavior.NestedFABBehavior"/>
//关掉隐藏属性
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dp_56"
android:layout_gravity="bottom"
app:layout_behavior=".behavior.CustomExpandBehavior"
//关掉向下隐藏
android:padding="8dp"
android:background="@color/blue">
</RelativeLayout>
6. CollapsingToolbarLayout
CollapsingToolbarLayout的子布局有3种折叠模式
pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部
当CollapsingToolbarLayout的子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~1。
//前面4.5.6合在一起使用
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="Collapse"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:src="@mipmap/header"
android:adjustViewBounds="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:title="@string/app_name"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srl_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/dp_32"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >//和AppBarLayout一起使用的RecyclerView必须设置这个
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_16"
android:src="@mipmap/ic_toolbar_add"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right"
app:backgroundTint="@color/fab_ripple"/>
</android.support.design.widget.CoordinatorLayout>
//这里的控件只要写布局效果就有了,不用写java代码
7. 侧滑NavigationView
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- the main content view -->
<include layout="@layout/layout_content" />
<!-- the navigetion view -->
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:fitsSystemWindows="true"
app:headerLayout="@layout/layout_header"
app:menu="@layout/layout_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
headerLayout布局如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/img1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="125dp"
android:layout_height="125dp"
android:scaleType="centerCrop"
android:src="@drawable/image" />
<TextView
android:layout_marginTop="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CSDN废墟的树博客"
android:textColor="@android:color/white" />
</LinearLayout>
menu 布局如下
?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<group
android:checkableBehavior="single"
android:title="Home items">
<item
android:id="@+id/nav_blog"
android:icon="@drawable/ic_account_balance_black_24dp"
android:title="博客地址" />
<item
android:id="@+id/nav_ver"
android:icon="@drawable/ic_error_outline_black_36dp"
android:title="版本信息" />
<item
android:id="@+id/nav_about"
android:icon="@drawable/ic_error_outline_black_36dp"
android:title="关于我" />
</group>
<item android:title="Sub items">
<menu>
<item
android:id="@+id/sub_exit"
android:icon="@drawable/ic_power_settings_new_black_36dp"
android:title="退出应用" />
<item
android:id="@+id/sub_switch"
android:icon="@drawable/ic_settings_applications_black_36dp"
android:title="切换主题" />
</menu>
</item>
</menu>
代码中控制NavigationView
private void initNavigationView(){
navigationView = (NavigationView) findViewById(R.id.navigationView);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
//获取头布局文件
View headerView = navigationView.getHeaderView(0);
//设置侧滑菜单选择监听事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
//关闭抽屉侧滑菜单
drawerLayout.closeDrawers();
return true;
}
});
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home){
//打开抽屉侧滑菜单
drawerLayout.openDrawer(GravityCompat.START);
}
return super.onOptionsItemSelected(item);
}
setItemBackgroundResource(int):给menu设置背景资源,对应的属性app:itemBackground
setItemIconTintList(ColorStateList):给menu的icon设置颜色,对应的属性app:itemIconTint
setItemTextColor(ColorStateList):给menu的item设置字体颜色,对应的属性app:itemTextColor
8. CardView
<android.support.v7.widget.CardView
tools:targetApi="lollipop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="@drawable/selector_elevation"
android:layout_marginLeft="@dimen/dp_8"
android:layout_marginRight="@dimen/dp_8"
android:layout_marginBottom="@dimen/dp_8"
android:clickable="true"
android:foreground="? android:attr/selectableItemBackground"
app:cardCornerRadius="@dimen/dp_8"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false">
</android.support.v7.widget.CardView>
card_view:cardElevation :阴影的大小
card_view:cardMaxElevation:阴影最大高度
card_view:cardBackgroundColor:卡片的背景色
card_view:cardCornerRadius:卡片的圆角大小
card_view:contentPadding:卡片内容于边距的间隔
card_view:contentPaddingBottom:
card_view:contentPaddingTop:
card_view:contentPaddingLeft:
card_view:contentPaddingRight:
card_view:contentPaddingStart:卡片内容于边距的间隔起始
card_view:contentPaddingEnd:卡片内容于边距的间隔终止
card_view:cardUseCompatPadding:设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式
card_view:cardPreventConrerOverlap:在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠
9. TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="@+id/til_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_16"
android:layout_marginLeft="@dimen/dp_16"
android:layout_marginRight="@dimen/dp_16"
app:counterEnabled="true"
app:counterMaxLength="11">
<android.support.design.widget.TextInputEditText
android:id="@+id/et_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_mobile"
android:drawableStart="@mipmap/ic_mobile"
android:drawablePadding="@dimen/dp_4"
android:gravity="center_vertical"
android:inputType="number"
android:hint="请输入手机号"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/dp_16"
android:layout_marginLeft="@dimen/dp_16"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_password"
android:drawableStart="@mipmap/ic_password"
android:drawablePadding="@dimen/dp_4"
android:gravity="center_vertical"
android:hint="请输入密码"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
10. popupwindow
//自定义选择照片的popupwindow
public class SelectPicPopupWindow extends PopupWindow {
private Button btn_take_photo, btn_pick_photo, btn_cancel;
private View mMenuView;
public SelectPicPopupWindow(Activity context, View.OnClickListener itemsOnClick) {
super(context);
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mMenuView = inflater.inflate(R.layout.layout_dialog_pic, null);
btn_take_photo = (Button) mMenuView.findViewById(R.id.btn_take_photo);
btn_pick_photo = (Button) mMenuView.findViewById(R.id.btn_pick_photo);
btn_cancel = (Button) mMenuView.findViewById(R.id.btn_cancel);
//取消按钮
btn_cancel.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//销毁弹出框
dismiss();
}
});
//设置按钮监听
btn_pick_photo.setOnClickListener(itemsOnClick);
btn_take_photo.setOnClickListener(itemsOnClick);
//设置SelectPicPopupWindow的View
this.setContentView(mMenuView);
//设置SelectPicPopupWindow弹出窗体的宽
this.setWidth(ViewGroup.LayoutParams.FILL_PARENT);
//设置SelectPicPopupWindow弹出窗体的高
this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
//设置SelectPicPopupWindow弹出窗体可点击
this.setFocusable(true);
//设置SelectPicPopupWindow弹出窗体动画效果
this.setAnimationStyle(R.style.PopupAnimation);
//实例化一个ColorDrawable颜色为半透明
ColorDrawable dw = new ColorDrawable(0xb0000000);
//设置SelectPicPopupWindow弹出窗体的背景
this.setBackgroundDrawable(dw);
//mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框
mMenuView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
int height = mMenuView.findViewById(R.id.pop_layout).getTop();
int y=(int) event.getY();
if(event.getAction()==MotionEvent.ACTION_UP){
if(y<height){
dismiss();
}
}
return true;
}
});
}
}
imgbtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
menuWindow = new SelectPicPopupWindow(getActivity(), itemsOnClick);
//显示窗口
menuWindow.showAtLocation(view, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //设置layout在PopupWindow中显示的位置
}
});
设置popupwindow显示的文字
pop.showAsDropDown(topView);
•showAsDropDown(View anchor):相对某个控件的位置(正左下方),无偏移
•showAsDropDown(View anchor,int xoff,int yoff):相对某个控件的位置,有偏移
•showAtLocation(View parent,int gravity,int x,int y):相对于父控件的位置