MaterialDesign应用技术

最新推荐文章于 2024-04-04 15:06:09 发布

醉墨重生

最新推荐文章于 2024-04-04 15:06:09 发布

阅读量383

点赞数

分类专栏： android入门到精通文章标签： MaterialDesign TableLayout NavigationView和Drawe CoordinatorLayout TextInputLayout

本文链接：https://blog.csdn.net/qq_24675479/article/details/78960947

版权

android入门到精通专栏收录该内容

48 篇文章 0 订阅

订阅专栏

TableLayout

布局

<!--tabBackground背景色-->
<!--tabIndicatorColor下面小块颜色-->
<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/colorPrimaryDark"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabTextColor="@android:color/white"
    app:tabMode="scrollable">

</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

</android.support.v4.view.ViewPager>

新建一个fragment

public class BlankFragment extends Fragment {
public BlankFragment() {

}

public static BlankFragment newInstance(String text) {
    Bundle args = new Bundle();
    args.putString("text", text);
    BlankFragment blankFragment = new BlankFragment();
    blankFragment.setArguments(args);
    return blankFragment;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_blank, container, false);
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    TextView tv = (TextView) view.findViewById(R.id.pager_text);
    String text = getArguments().getString("text");
    tv.setText(text);
}
}

新建一个adapter

public class MyAdapter extends FragmentPagerAdapter {
private List<String> list;

public MyAdapter(FragmentManager fm, List<String> list) {
    super(fm);
    this.list=list;
}

@Override
public Fragment getItem(int position) {
    return BlankFragment.newInstance(list.get(position));
}

@Override
public int getCount() {
    return list.size();
}

@Override
public CharSequence getPageTitle(int position) {
    return list.get(position);
}
}

使用

    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab);
    List<String> list = new ArrayList<>();
    for (int i = 0; i < 30; i++) {
        list.add(String.format("第%02d页", i));
    }
    MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), list);
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);

Toolbar

布局

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@color/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>

使用

 Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);
 //显示actionbar上面的返回键
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);

NavigationView和DrawerLayout

主布局

   <android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
    <!--主布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--tabBackground背景色-->
        <!--tabIndicatorColor下面小块颜色-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimaryDark"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/white">

        </android.support.design.widget.TabLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

        </android.support.v4.view.ViewPager>
    </LinearLayout>

   <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header_layout"
        app:itemIconTint="@color/navigationcolor"
        app:itemTextColor="@color/navigationcolor"
        app:menu="@menu/navigation" />
</android.support.v4.widget.DrawerLayout>

菜单布局

<?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/header_bg"
android:gravity="center"
android:orientation="vertical">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher_round" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="我的头像"
    android:textColor="@color/colorPrimary" />
</LinearLayout>

header_bg:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="45"
    android:endColor="#0f0"
    android:startColor="#2a742a"
    android:type="linear" />
</shape>

使用

    drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
    /**
     *改变android.R.id.home返回图标。
     *Drawer拉出、隐藏，带有android.R.id.home动画效果。
     *监听Drawer拉出、隐藏
     */
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0);
    drawerLayout.addDrawerListener(toggle);
    toggle.syncState();
    NavigationView navigationView = (NavigationView) findViewById(R.id.navigation);
    navigationView.setNavigationItemSelectedListener(this);

    @Override
   public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()) {
        case R.id.title_4:
            //关闭菜单
            drawerLayout.closeDrawer(GravityCompat.START);
            break;
    }
    return true;
}

菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/item_1"
        android:icon="@mipmap/ic_launcher"
        android:title="单选1" />
    <item
        android:id="@+id/item_2"
        android:icon="@mipmap/ic_launcher"
        android:title="单选2" />
    <item
        android:id="@+id/item_3"
        android:icon="@mipmap/ic_launcher"
        android:title="单选3" />
</group>

<item android:title="子菜单">
    <menu>
        <item
            android:id="@+id/title_1"
            android:icon="@mipmap/ic_launcher"
            android:title="菜单1" />
        <item
            android:id="@+id/title_2"
            android:icon="@mipmap/ic_launcher"
            android:title="菜单2" />
        <item
            android:id="@+id/title_3"
            android:icon="@mipmap/ic_launcher"
            android:title="菜单3" />
        <item
            android:id="@+id/title_4"
            android:icon="@mipmap/ic_launcher"
            android:title="菜单4" />
    </menu>
</item>
</menu>

Snackber(类似Toast)

使用一

 Snackbar.make(v, "snackbar", Snackbar.LENGTH_LONG)
            .setAction("undo", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    startActivity(new Intent(MainActivity.this, CoordinatorActivity.class));
                }
            }).show();

使用二:当snakebar只有和CoordinatorLayout使用时才可以使用向右滑动消失

Snackbar.make(v,"Snake in CoordinatorActivity",Snackbar.LENGTH_LONG).setAction("exit", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //退出所有程序
            ActivityCompat.finishAffinity(CoordinatorActivity.this);
        }
    }).show();
}

CoordinatorLayout(可以简单的理解为桢布局)

第一种使用方法：使用系统的滑动消失事件

    main_text = (TextView) findViewById(R.id.main_text);
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) main_text.getLayoutParams();
    //滑动消失事件,只是将alpha设置为0并没有真正的消失
    final SwipeDismissBehavior behavior=new SwipeDismissBehavior();
    behavior.setListener(new SwipeDismissBehavior.OnDismissListener() {
        @Override
        public void onDismiss(View view) {
             main_text.setVisibility(View.GONE);
            Snackbar.make(view,"撤销了一个控件",Snackbar.LENGTH_LONG).setAction("撤销", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                   main_text.setVisibility(View.VISIBLE);//设置完还是不可见，将alpha设置为1
                    ViewCompat.animate(v).alpha(1).start();
                }
            }).show();
        }

        @Override
        public void onDragStateChanged(int state) {

        }
    });
    params.setBehavior(behavior);
}

第二种使用方法：自定义behavior

public class MyBehave extends CoordinatorLayout.Behavior {
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
    return true;
}

@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
    super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
    if (dy < 0) {
        ViewCompat.animate(child).scaleX(1).scaleY(1).start();
    } else {
        ViewCompat.animate(child).scaleX(0).scaleY(0).start();
    }
}
}

AppBarLayout

布局

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="悬停条目" />
</android.support.design.widget.AppBarLayout>

<!--  app:layout_behavior="@string/appbar_scrolling_view_behavior"一定不可少-->
<android.support.v7.widget.RecyclerView
    android:id="@+id/main_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="LinearLayoutManager"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

FloatingActionButton

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floata"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@mipmap/ic_launcher" />

TextInputLayout

布局

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="用户名" />
</android.support.design.widget.TextInputLayout>

使用

textInputLayout.getEditText().addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            if (s.length()<6) {
                textInputLayout.setError("用户名必须为6名以上");
                textInputLayout.setErrorEnabled(true);
            }else{
                textInputLayout.setErrorEnabled(false);
            }
        }
    });

醉墨重生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MaterialDesign应用技术

TableLayout布局<android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@color/col
复制链接

扫一扫

专栏目录