文档章节

Material Design 控件

CrazyManDF
 CrazyManDF
发布于 2016/03/23 00:01
字数 1611
阅读 247
收藏 1

Material Design 新控件

SwipeRefreshLayout

只能包含一个子View,setOnRefreshListener设置下拉刷新监听

问题:以下布局会出现下拉和列表滑动冲突问题

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/sr_show"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

		<android.support.v7.widget.RecyclerView
			android:id="@+id/rv_show"
			android:background="@color/white"
			android:layout_width="match_parent"
			android:layout_height="match_parent">

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

		<RelativeLayout
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:background="@color/white"
			android:orientation="vertical">
		<ImageView
			android:id="@+id/iv_empty"
			android:layout_width="120dp"
			android:layout_height="175dp"
			android:layout_gravity="center_horizontal"
			android:contentDescription="@string/app_name"
			android:scaleType="centerCrop"
			android:layout_centerInParent="true"
			android:src="@drawable/img_empty" />
		</RelativeLayout>
	</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

解决:

rvShow.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
        @Override
        public void onScrollChanged() {
            if(rvShow.getChildCount() > 0 && rvShow.getChildAt(0).getTop() == 0){
                srShow.setEnabled(true);
            }else{
                srShow.setEnabled(false);
            }
        }
    });

参考:

https://stackoverflow.com/questions/26295481/android-swiperefreshlayout-how-to-implement-canchildscrollup-if-child-is-not-a-l/26296897#26296897 https://developer.android.com/samples/SwipeRefreshMultipleViews/src/com.example.android.swiperefreshmultipleviews/MultiSwipeRefreshLayout.html#l88

TextInputLayout

依赖:compile 'com.android.support:design:22.2.0'

 compile 'com.android.support:appcompat-v7:22.2.0'

使用TextInputLayout创建一个登陆界面:

http://www.jcodecraeer.com/a/basictutorial/2015/0821/3338.html

AutoCompleteTextView

AutoCompleteTextView 简单用法 :

http://blog.csdn.net/i_lovefish/article/details/17337999

DrawerLayout

位置:android-support-v4.jar

布局文件layout_drawer.xml

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

    <!--主布局-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/content_frame">
        </FrameLayout>
    </RelativeLayout>

    <!--侧滑Drawer-->
    <LinearLayout
        android:id="@+id/menu_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="[@android](http://my.oschina.net/asia):color/white"
        >
        <ListView
            android:id="@+id/list_drawer"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

java代码

DrawerLayout drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
LinearLayout menu_frame = (LinearLayout) findViewById(R.id.menu_frame);
ListView list_drawer = (ListView) findViewById(R.id.list_drawer);
//左侧Drawer设置内容
mPlanetTitles = new String[]{"菜单1","菜单2","菜单3"};
list_drawer.setAdapter(new ArrayAdapter<String>(MainActivity.this,
        android.R.layout.simple_expandable_list_item_1, mPlanetTitles));
list_drawer.setOnItemClickListener(new MyOnItemClickListener());
//主界面内容替换
MainFragment mainFragment = new MainFragment();
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.content_frame, mainFragment, "main");
fragmentTransaction.commit();

//监听左侧Drawer点击事件
toggle = new MyActionBarDrawerToggle(MainActivity.this,
            drawer_layout, toolbar, R.string.drawer_open, R.string.drawer_close);
toggle.syncState();  //实现左上角图标状态切换
drawer_layout.setDrawerListener(toggle);

 private class MyActionBarDrawerToggle extends ActionBarDrawerToggle {
    public MyActionBarDrawerToggle(Activity activity, DrawerLayout drawerLayout, Toolbar toolbar,int openDrawerContentDescRes, int closeDrawerContentDescRes) {
        super(activity, drawerLayout, toolbar, openDrawerContentDescRes, closeDrawerContentDescRes);
    }
    @Override
    public void onDrawerClosed(View drawerView) {Log.d(TAG,"closed");}
    @Override
    public void onDrawerOpened(View drawerView) {Log.d(TAG, "Opened");}
    @Override
    public void onDrawerStateChanged(int newState) {Log.d(TAG, "StateChanged");}
}

Toolbar

位置: compile "com.android.support:appcompat-v7:23.2.1"

布局文件

1、主题文件中取消ActionBar 

<!-- 使用 API Level 22 编译的话,要拿掉前綴android -->
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>

2、布局文件中设置

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:elevation="10dp">
</android.support.v7.widget.Toolbar>

3、res/menu/menu_main.xml中设置菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <item
        android:id="@+id/action_search"
        android:title="搜尋"
        android:icon="@android:drawable/ic_menu_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_refresh"
        android:title="更新"
        android:icon="@android:drawable/ic_menu_rotate"
        app:showAsAction="withText|ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:title="设置"
        app:showAsAction="never" />
</menu>

java代码

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Toolbar标题");
setSupportActionBar(toolbar);
//此后获取Toolbar
ActionBar bar = getSupportActionBar();
bar.setDisplayHomeAsUpEnabled(true);  //打开up button

//建立菜单
  @Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    setSearch(menu);
    return true;
}
//对选中的菜单进行操作
 @Override
public boolean onOptionsItemSelected(MenuItem item) {

    if(toggle.onOptionsItemSelected(item)) {
        Log.d(TAG, "logo==========");
        return true;
    }

    switch (item.getItemId()) {
        case android.R.id.home:
            Log.d(TAG, "0000000");
            MainActivity.this.finish();
            break;
        case R.id.action_refresh:
            Toast.makeText(this, "Refresh", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.action_search:
            Toast.makeText(this, "search", Toast.LENGTH_SHORT).show();
            return true;
        default:
    }
    return false;
}

//为ActionBar实现查询功能

private void setSearch(Menu menu) {
    final MenuItem item = menu.findItem(R.id.action_search);
    SearchView sv = (SearchView) MenuItemCompat.getActionView(item);
    if(sv != null){
        sv.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String arg0) {
                Toast.makeText(MainActivity.this, arg0, Toast.LENGTH_SHORT).show();
                MenuItemCompat.collapseActionView(item);
                return true;
            }
            @Override
            public boolean onQueryTextChange(String arg0) {
                return false;
            }
        });
    }
}

其他

自定义toolbar内容布局

Toolbar toolbar = (Toolbar) findViewById(R.id.sc_sub_toolbar);
if (toolbar != null) {
	toolbar.setTitle("");
}
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
	LayoutInflater mInflater = LayoutInflater.from(actionBar.getThemedContext());
	View mCustomView = mInflater.inflate(R.layout.sc_title_bar, null);
	ActionBar.LayoutParams params = new ActionBar.LayoutParams(
				ActionBar.LayoutParams.MATCH_PARENT,
				ActionBar.LayoutParams.MATCH_PARENT);

	actionBar.setCustomView(mCustomView, params); // 全局
	actionBar.setDisplayShowCustomEnabled(true); // 显示自定义视图
}

默认toolbar左边会有padding,可以设置contentInsetStart去掉

<android.support.v7.widget.Toolbar
	android:id="@+id/sc_sub_toolbar"
	android:layout_width="match_parent"
	android:layout_height="@dimen/main_toolbar_height"
	app:contentInsetStart="0dp"
	>
</android.support.v7.widget.Toolbar>

参见:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html

CollapsingToolbarLayout

用于可以折叠的Toolbar,继承至FrameLayout。

设置:

1、CoordinatorLayout作为主布局容器(位置compile 'com.android.support:design:22.2.1')

2、将AppBarLayout布局中的控件用CollapsingToolbarLayout包裹

3、设置CollapsingToolbarLayout布局属性:app:layout_scrollFlags="scroll|exitUntilCollapsed" 它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

4、将要滚动的的view设置属性app:layout_collapseMode="parallax"

5、设置Toolbar的属性,app:layout_collapseMode="pin"和android:layout_height="?attr/actionBarSize"

6、在触发(滚动)事件的view之上设置app:layout_behavior="@string/appbar_scrolling_view_behavior"

参见:

Behavior

TabLayout

位置:compile "com.android.support:design:23.2.1"

布局文件

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="@android:color/darker_gray"
        app:tabTextColor="@android:color/white"
        >
</android.support.design.widget.TabLayout>

java代码

TabLayout tabLayout = (TabLayout) this.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.drawable.ic_home1));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2").setIcon(R.drawable.ic_home2));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3").setIcon(R.drawable.ic_home3));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
// 改变选中tab图片颜色
final int tabIconColorSelect = ContextCompat.getColor(MainActivity.this, R.color.green);
final int tabIconColor = ContextCompat.getColor(MainActivity.this, R.color.black);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(tabIconColorSelect, PorterDuff.Mode.SRC_IN);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
        }
    });

AppBarLayout

它的作用是把AppBarLayout包裹的内容作为一个整体,组成AppBar

FloatingActionButton

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    app:layout_anchor="@id/drawer_layout"
    app:layout_anchorGravity="bottom|end"
    android:layout_margin="16dp"
    app:backgroundTint="#FF87FFEB"
    app:rippleColor="#33728DFF"
    app:elevation="5dp"
    app:pressedTranslationZ="12dp"
    app:layout_behavior="com.egrid.materialdemo.ScrollAwareFABBehavior"
    />

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {

	private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
	private boolean mIsAnimatingOut = false;

	public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
		super();
	}

	@Override
	public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
									   final View directTargetChild, final View target, final int nestedScrollAxes) {
		// Ensure we react to vertical scrolling
		return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
				|| super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
	}

	@Override
	public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
							   final View target, final int dxConsumed, final int dyConsumed,
							   final int dxUnconsumed, final int dyUnconsumed) {
		super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
		if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
			// User scrolled down and the FAB is currently visible -> hide the FAB
//			animateOut(child);
			child.hide();
		} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
			// User scrolled up and the FAB is currently not visible -> show the FAB
//			animateIn(child);
			child.show();
		}
	}
}

参见:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html

RecyclerView

http://blog.csdn.net/lmj623565791/article/details/45059587

CardView

Palette

Snackbar

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar snackbar = Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Snackbar.make(v, "ActionClick", Snackbar.LENGTH_LONG)
                                    .setActionTextColor(MainActivity.this.getResources().getColor(R.color.colorTest)).show();
                        }
                    }).setActionTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorTest));
            //设置文本颜色(snackbar_text是文本id,snackbar_action是Action的id,都是TextView控件)
            View view1 = snackbar.getView();
            ((TextView)view1.findViewById(R.id.snackbar_text)).setTextColor(Color.parseColor("#FF00FF"));
            snackbar.show();
        }
    });

© 著作权归作者所有

CrazyManDF
粉丝 3
博文 81
码字总数 33861
作品 0
程序员
私信 提问
Google Material Design设计语言的HTML/CSS/JS部分实现

Material Design Lite简介 本文主要介绍Google Material Design设计语言的HTML/CSS/JS部分实现。 博客地址:http://my.oschina.net/u/2275217/blog/496411 一、设计语言 github项目地址:htt...

笔阁
2015/09/28
1K
0
Material Design 控件知识梳理(7) - BottomNavigationBar

Material Design 控件知识梳理(1) - Android Design Support Library 是什么 Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout Material Design 控件知识梳理(3)......

泽毛
2017/04/15
0
0
Material Design Lite ,简洁惊艳的前端工具箱。

Material Design Lite简介 本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。 对应每一小节的在线练习地址如下,大家可以去试试。 http://www.hubwiz.com/course/55adae643ad79a1...

笔阁
2015/08/24
0
1
MD 风格的文本框--MaterialEditText

MaterialEditText,是一个遵循 Material Design 风格的文本输入框。 随着 Material Design 的到来, AppCompat v21 中也提供了 Material Design 的控件外观支持,其中包括 EditText 。但 Ap...

扔物线
2016/11/09
4.6K
0
Android UI框架(中)

唯美清新的switch按钮 优雅的switch状态按钮 通用的引导页和轮播器 仿微信图片选择器 快捷设置沉浸式状态栏 复杂表格布局 最全的开源集合 阻尼效果的界面 炫酷的纸飞机下拉刷新控件 仿ios水滴...

Moosphon
2017/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
2
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
4
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部