2016-12-13 21:02:30 zzj000 阅读数 1209
  • Android Material Design 新控件

    本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库 其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法

    19312 人正在学习 去看看 刘志远

最近做6.0的移植工作,想要更好的保留Google推出的Material Design风格(其实是以前的风格太丑了。。),为此用到了android.support.design包(以下简称design包)的控件,发现各种问题,花了一下午时间梳理清了。

踩坑过程就不赘述了,直接列出需要改动的地方:
1、修改Android.mk,要点:
a、需要添加android-support-v7-appcompat,因为design是依赖v7包的;
b、将design包和v7包一起打包到工程中;
c、将design包和v7包的res路径添加到LOCAL_RESOURCE_DIR中;

LOCAL_PATH := $(call my-dir)

include $(CLEAR_VARS)
LOCAL_MODULE_TAGS := optional
LOCAL_SRC_FILES := $(call all-java-files-under, $(src))
LOCAL_RESOURCE_DIR := $(LOCAL_PATH)/res \
    frameworks/support/v7/appcompat/res \
    frameworks/support/design/res

LOCAL_PACKAGE_NAME := SafeMode
LOCAL_CERTIFICATE := platform
LOCAL_PRIVILEGED_MODULE := true

LOCAL_STATIC_JAVA_LIBRARIES := android-support-v4 android-support-v7-appcompat android-support-design

LOCAL_AAPT_FLAGS := \
--auto-add-overlay \
--extra-packages android.support.design \
--extra-packages android.support.v7.appcompat

include $(BUILD_PACKAGE)

如果Android.mk没有写对,就是各种编译不通过,xxx can’t find referenced class xxxx,让我一直在Proguard上浪费时间,其实是mk的问题-。-||

经过以上步骤,就可以正常的把apk编译出来了。但是在我运行时竟然crash了。
这里写图片描述
一番折腾,找到了一个还没理解为啥这么改的办法:
2、主题中需要对colorAccent属性重设?!

以上,就可以正常使用TabLayout了。

2017-05-05 13:47:09 dong_junshuai 阅读数 857
  • Android Material Design 新控件

    本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库 其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法

    19312 人正在学习 去看看 刘志远
        Google IO 2015提出了Material Design设计风格,意在使移动端包括Web的设计风格一直,算是给出了一个比较好的可以参考规范,其中Android提出了Design Support Library包,Android Design Support Library的兼容性更广,直接可以向下兼容
Android 2.2,这不得不说是一个良心之作。其中包含了很多新控件,这些控件一个共同的特点就是优雅,那么,又包含哪几款控
件呢?接下来先给一个总纲:

        这些就是加入的新控件,那么,接下来我会对这些控件进行分类并对每个项目写上demo,希望自己能够坚持,也希望大家可
给出意见和帮助。
2016-12-01 14:08:36 weixin_36222137 阅读数 3533
  • Android Material Design 新控件

    本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库 其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法

    19312 人正在学习 去看看 刘志远

本文参考了:http://blog.csdn.net/xyz_lmn/article/details/48055919
http://blog.csdn.net/hebin320320/article/details/51461611 有兴趣的可以去看看,讲的非常不错
源码下载地址:github: https://github.com/Abounce/Material_demo
csdn:http://download.csdn.net/detail/weixin_36222137/9698919

Design包一共有八个控件分别是:
1.AppBarLayout
2.NavigationView
3.SnakeBar
4.CollapsingToolbarLayout
5.TabLayout
6.TextInputLayout
7.FloatingActionButton
8.CoordinatorLayout

下面4个控件一般要配合使用
RecyclerView
CardView
ToolBar
DrawerLayout

下面我就从头来介绍吧:
AppBarLayout:一般要和toolbar一起使用布局如下,一般用来隐藏头布局

   <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar

            android:fitsSystemWindows="true"
            android:id="@+id/coor_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"/>

为什么要在appBarlayout要包裹toolbar 这是为了让toolbar有联动效果

fitsSystemWindows实现状态栏各版本适配方案:
1.Android5.0以上:material design风格,半透明(APP 的内容不被上拉到状态)
2.Android4.4(kitkat)以上至5.0:全透明(APP 的内容不被上拉到状态)
3.Android4.4(kitkat)以下:不占据status bar
在Activity中添加代码即可使用ToolBar;

NavigationView:是左侧的菜单:
菜单布局如下:

<?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/sing_1"
            android:title="单选1"
            android:icon="@mipmap/ic_launcher" />
        <item
            android:id="@+id/sing_2"
            android:title="单选2"
            android:icon="@mipmap/ic_launcher" />

    </group>
    <item android:title="子菜单">
        <menu>
            <item
                android:id="@+id/item_1"
                android:title="菜单1"
                android:icon="@mipmap/ic_launcher" />
            <item
                android:id="@+id/item_2"
                android:title="菜单2"
                android:icon="@mipmap/ic_launcher" />
            <item
                android:id="@+id/item_3"
                android:title="菜单3"
                android:icon="@mipmap/ic_launcher" />
            <item
                android:id="@+id/item_4"
                android:title="菜单4"
                android:icon="@mipmap/ic_launcher" />
            <item
                android:id="@+id/item_5"
                android:title="菜单5"
                android:icon="@mipmap/ic_launcher" />

        </menu>
    </item>
</menu>

xml布局:

   <android.support.design.widget.NavigationView
           android:id="@+id/navigation"
            android:layout_gravity="start"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            app:menu="@menu/navigation"
          />

本人发现如果要给头布局有点击事件必须要动态添加头布局才有效果

   NavigationView  navigation = (NavigationView) findViewById(R.id.navigation);
        View head =View.inflate(this,R.layout.head,null);
        navigation.addHeaderView(head);
        ImageView iv= (ImageView) head.findViewById(R.id.iv);
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
            }
        });

SnakeBar:类是于Toast:
使用:

        Snackbar.make(v,"这是snackerbar",Snackbar.LENGTH_LONG).setAction("点击进入第coordinglayotu", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,CoorDingActivity.class));
            }
        }).show();
    }

CollapsingToolbarLayout:在toolbar外面套上CollapsingToolbarLayout就可以实现折叠效果了:

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl"
            //折叠时设置toolbar背景
            app:contentScrim="@color/colorPrimary"
            android:layout_width="match_parent"
            //让它能滑动,这是AppBarLayout的 属性
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_height="wrap_content">
        <ImageView
               app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"/>
        <android.support.v7.widget.Toolbar
            app:layout_collapseMode="pin"
            android:fitsSystemWindows="true"
            android:id="@+id/coor_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
        //需要悬停的就不要设置app:layout_scrollFlags属性
        <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="悬停条目"/>
    </android.support.design.widget.AppBarLayout>

CollapsingToolbarLayout 提供以下属性和方法是用
1. Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。还没研究明白,不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0],值越大视察越大。
5. CollapseMode :子视图的折叠模式,在子视图设置,有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

TabLayout:配合viewpager使用的,我之前的博客讲过 这里就不在讲了这里是地址点击

TextInputLayout:配合editText 使用

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

代码中使用:

  input_text = (TextInputLayout) findViewById(R.id.text_input);
        input_text.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){
                    input_text.setError("用户名必须为6位以上");
                    input_text.setErrorEnabled(true);
                }else {
                    input_text.setErrorEnabled(false);
                }
            }
        });

FloatingActionButton:一个可以挂载的imageview

//自定义behavior完成消失行为
  <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_gravity="end|bottom"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        app:layout_behavior="com.example.administrator.materialdesigndemo.coording.MyFabBehavior"
        android:layout_height="wrap_content" />
//挂载到appbarlyaout上
    <android.support.design.widget.FloatingActionButton
       app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="end|bottom"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

CoordinatorLayout:一个加强版的framelyaout 用layout_gravity来布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  >
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl"
            app:contentScrim="@color/colorPrimary"  //折叠的时候必须设置,颜色自己定
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_height="wrap_content">
        <ImageView
               app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"/>
        <android.support.v7.widget.Toolbar
            app:layout_collapseMode="pin"
            android:fitsSystemWindows="true"
            android:id="@+id/coor_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
        <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="悬停条目"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        app:layout_behavior="com.example.administrator.materialdesigndemo.coording.MyBehavior"
        android:clickable="true"
        android:gravity="center"
        android:id="@+id/coor_tv"
        android:background="#f40e0e"
        android:text="我是yhy"
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_gravity="end|bottom"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        app:layout_behavior="com.example.administrator.materialdesigndemo.coording.MyFabBehavior"
        android:layout_height="wrap_content" />
    <android.support.design.widget.FloatingActionButton
       app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="end|bottom"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


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

最后特别注意:
FloatingActionButton 有自己的behavior 消失和出现 需要自己定义

app:layout_scrollFlags=”scroll|exitUntilCollapsed” AppBarLayout的子类才能用 判断是否滑动
app:layout_collapseMode=”parallax” CollapsingToolbarLayout的子类才能用
scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。
enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
为了ToolBar可以滚动,CoordinatorLayout里面,放一个带有可滚动的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滚动的View。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如,示例中Viewpager设置了此属性。

如果appbarlyaout或者是toolbar 要想滑动联动必须给滑动的view 设置 app:layout_behavior=”@string/appbar_scrolling_view_behavior” (他是CoordinatorLayout的行为),否则就会覆盖

2016-04-26 14:52:57 Rodulf 阅读数 1992
  • Android Material Design 新控件

    本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库 其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法

    19312 人正在学习 去看看 刘志远

在导入design包以后,Android Studio R的问题,提示还显示:Move R from model to R



解决办法:

方法一:点击Build-》Rebuild Project

方法二:直接点击运行


如果上面的方法不行,请将Android Studio 重启以后再试一次就可以了。




tab表格
2019-02-23 09:57:20 liyutong12 阅读数 125
  • Android Material Design 新控件

    本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库 其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法

    19312 人正在学习 去看看 刘志远

布局
<android.support.v4.widget.DrawerLayout
//导入design包
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:id="@+id/draw"
>


<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
/>
<android.support.v4.view.ViewPager
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:id="@+id/view_pager"
/>

//侧滑+
</android.support.v4.widget.DrawerLayout>

代码
//页面切换
list = new ArrayList<>();
list.add(new Frag01());
list.add(new Frag02());
//tab的文字数据
String str[]={“首页”,“我的”};
//适配器
MyPageAdapter adapter = new MyPageAdapter(getSupportFragmentManager(),list,str);
view_pager.setAdapter(adapter);
tab.setupWithViewPager(view_pager);
适配器
public class MyPageAdapter extends FragmentPagerAdapter {

private ArrayList list;
private String str[];

public MyPageAdapter(FragmentManager fm, ArrayList list, String[] str) {
super(fm);
this.list = list;
this.str = str;
}

@Override
public Fragment getItem(int i) {
return list.get(i);
}

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

@Nullable
@Override
public CharSequence getPageTitle(int position) {
return str[position];
}
}

没有更多推荐了,返回首页