Material Design入门(三)

本文主要包括

  1. CollapsingToolbarLayout实现滚动动画效果
  2. ViewPager+tabLayout实现左右类Tab效果

控件介绍

这次需要用到得新控件比较多,主要有以下几个:

  • CoordinatorLayout
    组织它的子views之间协作的一个Layout,它可以给子View切换提供动画效果。
  • AppBarLayout
    可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件
  • CollapsingToolbarLayout
    可以控制包含在CollapsingToolbarLayout其中的控件,在响应collapse时是移除屏幕和固定在最上面
  • TabLayout
    结合ViewPager,实现多个TAB的切换的功能
  • NestedScrollView
    与ScrollView基本相同,不过包含在NestedScrollView中的控件移动时才能时AppBarLayout缩放

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

使用CollapsingToolbarLayout:

layout布局

<?xml version="1.0" encoding="utf-8"?>
<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.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="256dp"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageViewandroid:id="@+id/ivImage"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:scaleType="centerCrop"android:src="@drawable/book1"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.design.widget.TabLayoutandroid:id="@+id/sliding_tabs"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabGravity="fill"app:tabMode="fixed" /><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>
</android.support.design.widget.CoordinatorLayout>

activity代码

 Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(mToolbar);getSupportActionBar().setDisplayHomeAsUpEnabled(true);mToolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {onBackPressed();}});//使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上,设置到Toolbar上则不会显示CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);mCollapsingToolbarLayout.setTitle("MyCollapsingToolbar");//通过CollapsingToolbarLayout修改字体颜色mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色

代码解释

我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。

  1. 在CollapsingToolbarLayout中:

我们设置了layout_scrollFlags:关于它的值我这里再说一下:

scroll - 想滚动就必须设置这个。

enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。

exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。

其中还设置了一些属性,简要说明一下:

contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

  1. 在ImageView控件中:

我们设置了:

layout_collapseMode (折叠模式) - 有两个值:

pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。

  1. 在Toolbar控件中:

我们设置了layout_collapseMode(折叠模式):为pin

综上分析:

当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时,ImageView会有视差效果的向上滚动移除屏幕,当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色,Toolbar也一直会固定在最顶端。

【注】:使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上,设置到Toolbar上不会显示。即:

mCollapsingToolbarLayout.setTitle(” “);

该变title的字体颜色:

扩张时候的title颜色:mCollapsingToolbarLayout.setExpandedTitleColor();

收缩后在Toolbar上显示时的title的颜色: mCollapsingToolbarLayout.setCollapsedTitleTextColor();

这个颜色的过度变化其实CollapsingToolbarLayout已经帮我们做好,它会自动的过度.

参考链接:

Android5.0+(CollapsingToolbarLayout) - OPEN 开发经验库

ViewPager+tabLayout实现Tab效果

布局文件见上

activity代码

package com.zj.materialdesign5;import android.content.res.AssetManager;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;public class MainActivity extends AppCompatActivity {ViewPager mViewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(mToolbar);getSupportActionBar().setDisplayHomeAsUpEnabled(true);mToolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {onBackPressed();}});//使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上,设置到Toolbar上则不会显示CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);mCollapsingToolbarLayout.setTitle("MyCollapsingToolbar");//通过CollapsingToolbarLayout修改字体颜色mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色//设置ViewPagermViewPager = (ViewPager) findViewById(R.id.viewpager);setupViewPager(mViewPager);//给TabLayout增加Tab, 并关联ViewPagerTabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);tabLayout.addTab(tabLayout.newTab().setText("内容简介"));tabLayout.addTab(tabLayout.newTab().setText("作者简介"));tabLayout.addTab(tabLayout.newTab().setText("目录"));tabLayout.setupWithViewPager(mViewPager);}private void setupViewPager(ViewPager mViewPager) {MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());adapter.addFragment(DetailFragment.newInstance(getAsset("book_content.txt")), "内容简介");adapter.addFragment(DetailFragment.newInstance(getAsset("book_author.txt")), "作者简介");adapter.addFragment(DetailFragment.newInstance(getAsset("book_menu.txt")), "目录");mViewPager.setAdapter(adapter);}private String getAsset(String fileName) {AssetManager am = getResources().getAssets();InputStream is = null;try {is = am.open(fileName, AssetManager.ACCESS_BUFFER);} catch (IOException e) {e.printStackTrace();}return new Scanner(is).useDelimiter("\\Z").next();}static class MyPagerAdapter extends FragmentPagerAdapter {private final List<Fragment> mFragments = new ArrayList<>();private final List<String> mFragmentTitles = new ArrayList<>();public MyPagerAdapter(FragmentManager fm) {super(fm);}public void addFragment(Fragment fragment, String title) {mFragments.add(fragment);mFragmentTitles.add(title);}@Overridepublic Fragment getItem(int position) {return mFragments.get(position);}@Overridepublic int getCount() {return mFragments.size();}@Overridepublic CharSequence getPageTitle(int position) {return mFragmentTitles.get(position);}}}

DetailFragment布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout
        android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextView
            android:id="@+id/tvInfo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="10dp"android:textColor="@color/primary_text"android:textSize="16sp" /></LinearLayout></android.support.v4.widget.NestedScrollView>

DetailFragment代码

package com.zj.materialdesign5;import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;/*** Created by Chenyc on 2015/6/29.*/
public class DetailFragment extends Fragment {public static DetailFragment newInstance(String info) {Bundle args = new Bundle();DetailFragment fragment = new DetailFragment();args.putString("info", info);fragment.setArguments(args);return fragment;}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_detail, null);TextView tvInfo = (TextView) view.findViewById(R.id.tvInfo);tvInfo.setText(getArguments().getString("info"));
//        tvInfo.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View v) {
//                Snackbar.make(v,"hello",Snackbar.LENGTH_SHORT).show();
//            }
//        });return view;}
}

代码解释

  • 为什么不用new DetailFragment而要用newInstance,简单说是因为activity发生变化时仍旧保留数据,详情参见链接
    【译】使用newInstance()来实例化fragment - 陈哈哈 - 博客园
    Android解惑 - 为什么要用Fragment.setArguments(Bundle bundle)来传递参数 - 推酷

  • getAsset函数,是从asserts文件夹中读取资源,在该文件夹下,有book_content.txt,book_author.txt,book_menu.txt三个文件,通过这个函数读取出来

完成,效果如下

这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

干货|2018物流机器人行业报告发布!不容错过

来源&#xff1a;楼今岁阅 摘要&#xff1a;2018年&#xff0c;我们都在谈智能家居、智能交通、智能工业、智能安防等热门物联网话题&#xff0c;并且预计到2020年&#xff0c;中国物联网的整体规模将超过1.8万亿元。发展如此迅速&#xff0c;其涉及的领域一定会越来越广&#…

【年度回忆录】如何做到1年90000粉丝?

亲爱的小伙伴&#xff1a; 小伙伴你好&#xff0c;我是不吃西红柿&#xff0c;仅以此文作为 2021 年终总结&#xff0c;顺便跟大家分享一些博主的心得经验&#xff0c;希望你我和 CSDN 都越来越好&#xff01; 一、C站点滴 翻开 2021 CSDN 年度回忆录&#xff0c;有种难以言…

Material Design综合实例

背景知识 drawlayout的使用 recycleView的使用 CardView的使用 一些开源动画库的使用 ImageView的scaleType属性与adjustViewBounds属性 &#xff0c;参考链接&#xff1a; ImageView的android:adjustViewBounds属性 - - ITeye技术网站 Android ImageView的scaleType属性与…

DARPA将开发无需手术的神经技术,实现脑机接口

来源&#xff1a;IEEE电气电子工程师学会到目前为止&#xff0c;DARPA&#xff08;美国国防部高级研究计划局&#xff09;的神经科学项目部&#xff08;也称为国防部疯狂科学部门&#xff09;一直专注于可服务于那些因身体或大脑残疾回国的士兵的技术&#xff0c;例如&#xff…

2018年全球自动驾驶法律政策研究 | 附报告下载

来源&#xff1a;腾讯研究院摘要&#xff1a;2018年9月13日&#xff0c;在中国法学会研究部、腾讯研究院联合举办的“‘法律人的互联网思维’系列研修会第二期——自动驾驶汽车的技术、产业和法律维度”上&#xff0c;腾讯研究院发布《2018年全球自动驾驶法律政策研究报告》。0…

全球最具影响力AI机构TOP100排名:中国5所高校1所研究院入围

来源&#xff1a;学术头条&#xff08;SciTouTiao&#xff09;现在“人工智能”&#xff08;ArtificialIntelligence&#xff09;一词时常“做客”各大媒体平台&#xff0c;成为人们所关注的热点话题&#xff0c;而在学术圈&#xff0c;AI技术同样也是最具活力与吸引力的研究课…

安卓开源库之动画篇

本文主要介绍收集了笔者所用过的开源动画库&#xff0c;达到一些比较好看的效果。 一个富有动感的 Sheet 链接&#xff1a; zzz40500/AndroidSweetSheet: 一个富有动感的Sheet(选择器) 效果如下 示例代码 package com.zj.testsheet;import android.os.Bundle; import andr…

《Python 黑科技》代理ip奇技淫巧

点赞 ➕ 评论 ➕ 收藏 三连再看你最帅 目录 &#x1f41b; 1、什么是住宅动态ip&#xff1f; &#x1f98b; 1.1 动态ip优点是什么&#xff1f; &#x1f40c; 1.2 环境准备 &#x1f41e; 1.3 获取代理ip &#x1f41c; 2、使用代理IP &#x1f424; 2.1 浏览器使用代理…

MIT发布2018年全球10大突破性技术!

来源&#xff1a; 数字化企业作为全球最为著名的技术榜单之一&#xff0c;《麻省理工科技评论》全球十大突破性技术具备极大的全球影响力和权威性&#xff0c;至今已经举办了18年。每年上榜的技术突破&#xff0c;有的已经在现实中得以应用&#xff0c;有的还尚需时日&#xff…

Android实现监测网络状态

本文主要用到了安卓监测网络状态变化功能&#xff0c;实现了WIFI,3G,无网络状态切换时发出通知的功能。 主要知识点 servicebroadcast接口回调实现 service的基本知识 service可分为 按运行地点分类 本地服务 远程服务 按按运行类型分类&#xff1a; 前台服务后台服务按…

jni 步骤

这是我转的文章&#xff0c;是篇外文翻译&#xff0c;将介绍如何学习安装 Android NDK 并开始使用它。在这一教程结束后&#xff0c;将创建你自己的项目&#xff0c;从 Java 代码简单地调用原生C 语言代码。教程细节技术&#xff1a;Android SDK、NDK、C 语言难度&#xff1a;进…

德勤:2025年汽车行业价值链的四个合理情境

来源&#xff1a;亿欧摘要&#xff1a;近日&#xff0c;德勤发布《未来汽车行业价值链&#xff1a;2025年以后》&#xff0c;假设在大部分整车企业都有变革意愿的情境下&#xff0c;识别出四个2025年整车企业价值链可能具有的合理设定。随着自动驾驶、共享经济等新技术以及新商…

盘点英特尔、苹果、高通、AMD 处理器重大 Bug,硬件的坑软件能填?

来源&#xff1a;21ic电子网英特尔的CPU存在两大漏洞 ——Meltdown 和 Spectre&#xff0c;波及自 1995 年以来所有使用英特尔芯片的硬件设备。不止 Linux、Android、Windows、苹果 OS X 等操作系统&#xff0c;AWS、Azure、谷歌云等云计算提供商均受到影响&#xff0c;其威胁范…

java读写html文件时出现中文乱码问题的解决方法

最近在做HTML静态生成&#xff0c;需要从硬盘上把模版文件的内容读出来。然后&#xff0c;替换相关标签写到指定的文件中。无论是读写&#xff0c;都遇到了中文乱码问题。试过多种方法&#xff0c;发现下面一种可以避免中文乱码。&#xff08;无论读取还是写入一定要进行编码转…

Android实现网络音乐播放器

本文是一个简单的音乐播放器 布局代码 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layo…

【干货51页PPT】深度学习理论理解探索

来源&#xff1a;专知普林斯顿大学计算机科学系教授Sanjeev Arora做了深度学习理论理解探索的报告&#xff0c;包括三个部分&#xff1a;Why overparametrization and or overprovisioning?Optimization in deep learningTheory for Generative Models and Generative Adversa…

新星计划·第三季【博文流量密码公开课】

一、优质的内容 刚开始写博客的小伙伴&#xff0c;其不可漫无目的的写&#xff0c;到头来对自己的技术沉淀毫无帮助&#xff0c;升职加薪跳槽也不加分&#xff0c;更无法通过付费专栏等方式进行变现&#xff0c;到头来一无所获&#xff01; 强烈建议大家提前规划写什么方向的…

百度地图开发之定位

本文主要讲述利用百度地图API实现定位功能 第一步:下载SDK与申请KEY 参考链接&#xff1a;Android 百度地图 SDK v3.0.0 &#xff08;一&#xff09; - Hongyang - 博客频道 - CSDN.NET 注意 百度地图SDK与百度定位SDK已经分开了&#xff0c;如果在工程中同时导入这两个包…

Java与Http协议

Java与Http协议 引言 http&#xff08;超文本传输协议&#xff09;是一个基于请求与响应模式的、无状态的、应用层的协议&#xff0c;常基于TCP的连接方式。HTTP协议的主要特点是&#xff1a; 1.支持客户/服务器模式。 2.简…

《Python 黑科技》一键分析评论关键词,制作精美词云

本文重点&#xff1a; 学会抓取文章评论 学会文本分词、制作词云 目录 &#x1f351; 一、抓取全部评论 &#x1f35e; 1、找到评论接口 &#x1f34f; 2、Python 获取评论 &#x1f3c8; 二、文本分词、词云制作 &#x1f34b; 1、文本分析 &#x1f350; 2、生成词云…