一步步构建Material Design风格App

最新推荐文章于 2021-05-26 03:33:02 发布
最新推荐文章于 2021-05-26 03:33:02 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： Android控件/UI 文章标签： Material Design 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leelit/article/details/50189315
版权

这篇文章算是对前面三篇文章的一个总结

从自定义主题开始一步步构建Material Design风格的App，这里说的Material Design风格仅指使用那些Android L后新出的控件，因为真正实现Material Design是一门很讲究的设计学问，应该更多是由设计师去学习交付。另外，这篇文章只贴代码和效果，不会有讲解说明，除非是上面几篇文没提到的才会另外附上。

现在开始来一步步来构建这个最终的效果吧
这里写图片描述

0、依赖

compile 'com.android.support:design:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'

1、自定义主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#2196F3</item>
    <item name="colorPrimaryDark">#1565C0</item>
    <item name="colorAccent">#E91E63</item>
</style>

2、Toolbar替换ActionBar

1、xml
res/layout/activity_main

<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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="MaterialDesignDemo"/>

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

2、如果需要，可以编辑一下menu的xml
res/menu/menu_main

<menu 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"
      tools:context=".MainActivity">
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_fa_edit"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="always"/>
</menu>

3、java

private Toolbar mToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initInstances();

    // Toolbar替换ActionBar
    setSupportActionBar(mToolbar);

}

// 后面所有控件的实例都会先放在此方法，确保相互调用时不出现nullPointer
private void initInstances() {
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

4、效果
这里写图片描述

3、FloatingActionButton

1、xml

<android.support.design.widget.CoordinatorLayout...>
    <android.support.v7.widget.Toolbar.../>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@drawable/ic_plus"/>

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

2、效果
这里写图片描述

4、DrawerLayout&NavigationView

1、xml

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    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.support.design.widget.CoordinatorLayout...>
        ...
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu_nav">
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

2、此处省略@layout/nav_header，@menu/menu_nav
3、java

    ...
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.hello_world, R.string.hello_world);
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                mDrawerLayout.closeDrawers();
                Toast.makeText(MainActivity.this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    ...

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

4、效果
这里写图片描述

5、AppBarLayout&TabLayout

1、xml

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

            <android.support.v7.widget.Toolbar
                .../>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary">
            </android.support.design.widget.TabLayout>


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

2、java

// mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); // tab数量超过一屏
mTabLayout.addTab(mTabLayout.newTab().setText("Tab1").setIcon(R.drawable.ic_fa_android));
mTabLayout.addTab(mTabLayout.newTab().setText("Tab2").setIcon(R.drawable.ic_fa_android));
mTabLayout.addTab(mTabLayout.newTab().setText("Tab3").setIcon(R.drawable.ic_fa_android));

3、效果
这里写图片描述

6、TabLayout&ViewPager

如果你想自己管理Tab完全可以setOnTabSelectedListener然后自主把控，通常都是管理Fragment；你也可以集成TabLayout与ViewPager。

1、xml

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

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

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v4.view.ViewPager>

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

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

2、java，首先注释掉上面TabLayout的addTab代码，因为这里会自动帮我们addTab。

final List<Fragment> fragments = new ArrayList<>();
final List<String> titles = new ArrayList<>();

for (int i = 1; i <= 3; i++) {
    fragments.add(MyFragment.getInstance("Fragment" + i));
    titles.add("Tab" + i);
}

mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

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

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
});
mViewPager.setOffscreenPageLimit(fragments.size());
mTabLayout.setupWithViewPager(mViewPager);
// 如果需要icon
for (int i = 0; i < fragments.size(); i++) {
    mTabLayout.getTabAt(i).setIcon(R.drawable.ic_fa_android);
}

3、效果
这里写图片描述

7、SwipeRefreshLayout&RecyclerView&CardView

1、xml
res/layout/fragment_item

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeRefreshLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v7.widget.RecyclerView>

</android.support.v4.widget.SwipeRefreshLayout>

res/layout/recycler_item
android:foreground="?android:attr/selectableItemBackground"这条属性可以使CardView有点击效果。

<LinearLayout
    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="wrap_content">


    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="4dp"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="@string/hello_world"
                android:textSize="18sp"/>

        </RelativeLayout>


    </android.support.v7.widget.CardView>
</LinearLayout>

2、java
修改MyFragment

public class MyFragment extends Fragment {

    private RecyclerView mRecyclerView;
    private SwipeRefreshLayout mSwipeRefreshLayout;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_item, container, false);
        mSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.swipeRefreshLayout);
        mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(container.getContext()));
        String text = getArguments().getString("key", "default");
        List<String> list = new ArrayList<>();
        for (int i = 1; i <= 10; i++) {
            list.add(text + " data" + i);
        }
        final MyAdapter adapter = new MyAdapter(list);
        mRecyclerView.setAdapter(adapter);

        adapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                adapter.removeData(position);
            }
        });

        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        adapter.addData(0,new String[]{"new data1","new data2"});
                        mRecyclerView.scrollToPosition(0);
                        mSwipeRefreshLayout.setRefreshing(false);
                    }
                }, 2000);
            }
        });
        return view;
    }

    public static MyFragment getInstance(String text) {
        MyFragment myFragment = new MyFragment();
        Bundle bundle = new Bundle();
        bundle.putString("key", text);
        myFragment.setArguments(bundle);
        return myFragment;
    }
}

MyAdapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<String> mList;
    private OnItemClickListener mOnItemClickListener;


    public MyAdapter(List<String> list) {
        mList = list;
    }

    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false));
    }

    @Override
    public void onBindViewHolder(final MyAdapter.ViewHolder holder, int position) {
        holder.textView.setText(mList.get(position));
        if (mOnItemClickListener != null) {
            holder.cardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickListener.onItemClick(v, pos);
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }


    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        mOnItemClickListener = onItemClickListener;
    }

    public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }

    public void addData(int position, String[] data) {
        int length = data.length;
        for (int i = 0; i < length; i++) {
            mList.add(position + i, data[i]);
        }
        notifyItemRangeInserted(position, length);
    }

    public void addData(int position, String data) {
        mList.add(position, data);
        notifyItemInserted(position);
    }

    public void removeData(int position) {
        mList.remove(position);
        notifyItemRemoved(position);
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView textView;
        public CardView cardView;

        public ViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.textView);
            cardView = (CardView) itemView.findViewById(R.id.cardView);
        }
    }
}

3、效果
这里写图片描述

4、发挥CoordinatorLayout强大作用，一行代码让Toolbar滚动起来。

<android.support.v7.widget.Toolbar
    ...
    app:layout_scrollFlags="scroll|enterAlways"/>

这里写图片描述

8、more

  • CollapsingToolbarLayout
  • TextInputLayout

通过CollapsingToolbarLayout和layout_scrollFlags实现酷炫效果。
这里写图片描述

源码

源码地址
https://github.com/leelit/MaterialDesignDemo

leelit
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
从头开始做一个Material Design风格的App（2）
木鱼wzh的博客
03-02 253
3.1添加ToolBar(ActionBar) 添加ToolBar非常简单，你需要做的仅仅是为toolbar创建一个单独的layout布局，如果你想在哪里展示toolbar，只要在对应布局里将toolbar的布局文件include进来即可。 （8）在res–&gt;layout文件夹下创建一个名为toolbar.xml的文件，然后在里面添加一个android.support.v7.widget.T...
Android Settings开发之修改
maozhuxigood
03-25 1359
版本：1.0 日期：2014.3.20 2014.3.25 版权：© 2014 kince 转载注明出处 下面是Seeings应用的截图： 可以看出这是很典型的使用了Fragment后的界面，设置里面有WIFI、蓝牙、显示、存储、应用等众多功能。左边的每一项，对应着右边的一个设置界面，Fragment有四个子类：DialogFragment, ListFragment, Pre...
Android Material Design风格基本使用（实现简易新闻APP）
Felix
07-19 1万+
前言：Google推出Material Design已经很久了，我在很久之前就开始使用Material Design风格编写APP，感觉还是挺好看的，风格比较统一。今天特意写一个简单的Demo来介绍一下Material Design(简称MD)的基本使用，由于Demo很简单，编码有点随意，大佬勿喷！ 首先上两张Demo效果图：                 1、DrawerLayout...
报错No resource found that matches the given name (at 'title' with value '@string/action_settings'
用来学习的地方
07-04 3007
cocos2dx编译报错信息： menu文件 http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.example.sa
Android Settings剖析与修改
bboyliaoye
03-30 3万+
  原文地址： http://blog.csdn.net/wangjinyu501/article/details/22077803 下面是Seeings应用的截图：   可以看出这是很典型的使用了Fragment后的界面，设置里面有WIFI、蓝牙、显示、存储、应用等众多功能。左边的每一项，对应着右边的一个设置界面，Fragment有四个子类：DialogFrag
MaterialDesign-DemoApp
最新发布
03-31
【MaterialDesign-DemoApp】是一个基于WPF平台的UI框架示例应用，它展示了Material Design设计风格在Windows桌面应用程序中的实现。Material Design是由Google推出的现代设计语言，旨在提供跨平台的一致性、美观和...
Android项目源码MaterialDesign风格APP魅力宜昌
07-29
本应用主要是为了学习最新的MD风格而开发，目前正在开发过程中。预计实现功能为： 1.使用google开源网络框架Volley 2.使用Bomb公司的云服务器SDK，不会服务器也能实现自己定制数据内容 3.实现第三方登录、百度定位、...
Android构建Material Design应用详解
08-29
Material Design不仅仅是一个设计语言，也提供了一些实用的控件和效果，帮助开发者快速构建Material Design应用程序。 Title：Android构建Material Design应用详解 Material Design的出现主要是为了解决Android...
Material design风格浮动按钮特效特效代码
03-20
material-floating-button是一款使用纯Js制作的Material design风格浮动按钮特效。该Material design风格浮动按钮特效提供4种动画特效，它们都可以在鼠标滑过按钮时以炫酷的方式展开按钮。
MaterialDesign效果的一个日本APP.zip
07-30
【标题】: MaterialDesign效果的一个日本APP.zip 这个压缩包文件包含了一个名为"Qiitanium-master"的项目，该项目展示了日本开发者如何应用Material Design设计原则到Android应用程序中。Material Design是谷歌推出...
在Android系统settings里添加设置选项
yzx41099296的专栏
03-09 4769
目的：在通话设置菜单下，添加一dect设置菜单，里面再添加一checkBOxPreference  来使能硬件模块。  -------------------------  目前做的项目，需要在系统settings里面添加一选项来使能硬件模块，里面涉及到的preference知识，请网上了解，这里记录下方法。  1,settings 应用一般在 目录：\packages\apps\
Android ActionBar创建带图片和文字的menu
纸上得来终觉浅，绝知此事要躬行
01-30 1万+
因为才开始使用到ActionBar功能，所以就很随意的做了一个效果（隐藏item只能显示文字而不能显示图标）；  使用的NavigationDrawerFragment实现的UI框架。        需求是：设置菜单的图标并且带文字。
Android ActionBar完全解析，使用官方推荐的最佳导航栏(上)
热门推荐
郭霖的专栏
06-05 24万+
Action Bar是一种新増的导航栏功能，在Android 3.0之后加入到系统的API当中，它标识了用户当前操作界面的位置，并提供了额外的用户动作、界面导航等功能。使用ActionBar的好处是，它可以给提供一种全局统一的UI界面，使得用户在使用任何一款软件时都懂得该如何操作，并且ActionBar还可以自动适应各种不同大小的屏幕。下面是一张使用ActionBar的界面截图。其中，[1]是ActionBar的图标，[2]是两个action按钮，[3]是overflow按钮
android+更换标题栏图标,【已解决】把android的titlebar/actionbar中的文字/字符串换为图标...
weixin_34039843的博客
05-26 369
【背景】android的app中，原先是：即：对应的是标题栏(actionbar，titlebar)中，菜单按钮是文字，想要换成图标。注：此处对应的配置是：xml的配置：res\menu\field_view_menu.xml的：android:id="@+id/save_edited_fields"android:orderInCategory="10"android:showAsAction=...
android 里的一些字符串资源文件夹搜不到,android – 找不到匹配给定名称的资源(在’title’,值为’@ string / action_settings’)...
weixin_33662430的博客
05-25 362
所以我最近(像今天最近)开始尝试在日食工作.我一直在追踪android开发者初学者课程,一切顺利,直到这一点.我已经建立了一个简单的用户界面(http://developer.android.com/training/basics/firstapp/building-ui.html#Button),并做了一切话,但是当我尝试运行它说,No resource found that matches t...
安卓添加应用栏的菜单键（三个点）
Watom_663的博客
06-26 1万+
前言 当新建android工程后，发现原来使用的ActionBar的屏幕右上角的三个点不再出现了（如图中3），它是因为什么原因不在出现了呢？如果不是我自己的原因，那怎么才能搞出来。这个问题通过下面的方式已经得到了解决。 1. 为什么这个菜单键（三点）会不见了？大概意思也就是说安卓也在不断地进化中，有些东西可能被慢慢替代掉，从 Android 3.0（API 级别 11）开始，采用 And
android系统menu菜单选项设置
OnlyRailgun的博客
12-11 3513
第一次写简单的menu按钮，基本的方法运用实现
十款 Material Design 风格的 Android 开源项目
weixin_34290631的博客
09-12 627
2019独角兽企业重金招聘Python工程师标准>>> ...
从头开始做一个Material Design风格的App（1）
木鱼wzh的博客
02-13 731
1212
什么是Material Design 风格
09-14
Material Design 风格是一种由Google推出的设计风格，旨在为移动设备和web应用程序提供一致且有吸引力的用户界面设计。它的设计理念主要基于实物（material）的触感和运动效果，并将这些概念应用到数字界面设计中。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值