Android Material design 中的新控件使用

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):相对于父控件的位置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值