Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >一个Demo学会用Android兼容包新控件

一个Demo学会用Android兼容包新控件

作者头像
GitOPEN
发布于 2019-01-29 03:21:20
发布于 2019-01-29 03:21:20
1.5K00
代码可运行
举报
运行总次数:0
代码可运行

前言

伟大的Google为Android推出了一系列的兼容包,最新的就是Design Support Library了,这里我们结合v7和v4中的几个控件,来主要学习Design Support Library中的几个新控件!一个Demo学会用它们!

效果动图GIF:

学习内容

通过本实例可以学习到以下内容:

  • Drawerlayout和NavigationView实现优雅的Google范儿侧边栏;
  • 新控件CoordinatorLayout、AppBarLayout、Toolbar、FloatingActionButton的用法,以及Toolbar的渐变隐藏动画效果;
  • 官方Tabs组件TabLayout和ViewPager结合实现主界面内容区域;
  • SwipeRefreshLayout和RecyclerView结合实现下拉刷新,以及RecyclerView的数据适配器RecyclerView.Adapter的用法,还有RecyclerView中item的点击事件的实现方法;
  • 卡片式CardView的用法;
  • 类似Toast的新控件Snackbar的用法。

##布局文件

在源码中学习Android,是有种身临其境的感觉的。

学习Android解释再多代码都没有用,因为解释过了还是不会用。因此,我们这里将布局文件XML源码贴出来供学习,放心,所有知识点都已经注释在源码中。

###styles.xml源码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<resources>

    <style name="AppTheme" parent="MyThemeBlue"></style>

    <!-- 蓝色为主色调 -->
    <style name="MyThemeBlue" parent="Theme.AppCompat.Light.NoActionBar">

        <!--选中状态icon的颜色和字体颜色-->
        <item name="colorPrimary">@color/main_blue_light</item>
        <item name="colorPrimaryDark">@color/main_blue_dark</item>
        <item name="colorAccent">@color/main_blue_light</item>
        <!--正常状态下字体颜色和icon颜色-->
        <item name="android:textColorPrimary">@color/main_white</item>

    </style>
</resources>

colorPrimary、colorPrimaryDark、colorAccent、textColorPrimary的含义,请看博文《Android L+ Theme 与 Toolbar 实例》

主布局activity_my.xml源码(重点)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 第一个位置 -->
    <!-- 你的主界面内容,必须放置在Drawerlayout中的第一个位置
    根据自己的需要来放置控件,
        例如:LinearLayout布局或者RelativeLayout布局;
    也可以是单个控件,
        如 TextView等  -->
    <include layout="@layout/content_main" />


    <!-- 第二个位置 -->
    <!-- 用来放Drawerlayout中的内容,
    这里使用NavigationView来实现类似Google pLay中的侧滑栏效果,
    必须在build.gradle中添加compile 'com.android.support:design:22.2.0';
    另外,如果不需要NavigationView效果,
    也可以放置一个普通布局文件就是一个普通的侧滑栏了。
     -->

    <!--
     注意:
        如果使用NavigationView(其他控件也是一样)的特有属性,需要加上命名空间:
                xmlns:app="http://schemas.android.com/apk/res-auto"另外,一定要添加android:layout_gravity="left"属性。
     -->

    <!--
        属性解析:
            app:headerLayout:    NavigationView中头部的head部分的布局,是自己实现的;
            app:menu:            指定Nav中的Menu布局,就是自己写Menu中的按钮,要放在res/menu/文件夹下;
            app:itemTextColor:  用来设置Nav中,menu item的颜色选择器。
        还有一些属性:           和itemTextColor用法一样,指定一个颜色选择器,实现不同的颜色效果。
            app:itemIconTint:
            app:itemBackground:
    -->
    <android.support.design.widget.NavigationView
        android:id="@+id/id_navigationview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:itemTextColor="@color/selector_nav_menu_textcolor"
        android:layout_gravity="left" />

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

content_main.xml源码(重点)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?><!--
    CoordinatorLayout是这次新添加的一个增强型的FrameLayout,通过它可以实现很多东西:
        例如:
            1.界面向上滚动逐渐隐藏Toolbar;
            2.在其中可以放置浮动的View,就像Floating Action Button。
-->
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <!--
        AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar。
            将AppBarLayout放在CoordinatorLayout中,就可以实现滚动效果。
            本例中,TabLayout在界面滚动时,随着Toolbar的逐渐隐藏,将占据Toolbar的位置,
                达到节省屏幕空间,界面动画效果的目的。
    -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/id_appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <!--

        属性解析:
            app:theme:指定Toolbar的样式,包括ActionbarToggle和popupMenu的指示图标颜色
            app:popupTheme:指定popupMenu溢出后的样式
            app:title:    指定Toolbar中主Title的内容
        -->

        <!--
            app:layout_scrollFlags的意思是:

                设置的layout_scrollFlags有如下几种选项:
                    scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
                    enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。
                    enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
                    exitUntilCollapsed: 当视图会在滚动时,它一直滚动到设置的minHeight时完全隐藏。

            需要注意的是,后面两种模式基本只有在CollapsingToolbarLayout才有用,
            而前面两种模式基本是需要一起使用的,也就是说,这些flag的使用场景,基本已经固定了。
        -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:title="@string/toolbar_title" />

        <!--
            Tabs选项卡,和ViewPager搭配使用可以增大界面的内容展示量,实现各种个性化分类内容展示而不互相干扰!
            Google在Design support library中提供官方的Tab组件,它就是TabLayout。
            相比Github上面开源的第三方库,这个更加简单易用。

            有以下常用属性:
                app:tabGravity="fill"  表示TabLayout中的Tabs要占满屏幕的width;
                app:tabSelectedTextColor:Tab被选中字体的颜色;
                app:tabTextColor:Tab未被选中字体的颜色;
                app:tabIndicatorColor:Tab指示器下标的颜色;
        -->
        <android.support.design.widget.TabLayout
            android:id="@+id/id_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/main_white" />

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

    <!--
        我们常用的ViewPager,不多说了。你会发现多了一个 app:layout_behavior 属性,没错,
            如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果,那就必须在它下面的那个控件中加入这个属性,
            并且下面的这个控件必须是可滚动的。
        当设置了layout_behavior的控件滑动时,就会触发设置了layout_scrollFlags的控件发生状态的改变。
    -->
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <!--
        这是一个浮动按钮。由于FloatingActionButton是重写ImageView的,
        所有FloatingActionButton拥有ImageView的一切属性。

        属性介绍:
            app:backgroundTint : FAB的背景色。
            app:elevation      :FAB的阴影效果。
            app:rippleColor    :设置涟漪的颜色,默认是由背景色生成的暗色调,可以自己指定。
            app:pressedTranslationZ  :FAB动画效果,在它被按下的时候阴影就会增大。
    -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/id_floatingactionbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@mipmap/ic_action_plusone"
        app:backgroundTint="@color/main_blue_light"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        app:rippleColor="@color/main_blue_dark" />

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

frag_main.xml源码(Fragment的布局)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>


<!--

SwipeRefreshLayout是伟大的Google在v4包中给出的下拉刷新组件。

-->
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_swiperefreshlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!--
            使用RecyclerView需要在build.gradle中添加
           compile 'com.android.support:recyclerview-v7:22.2.0'
    -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/id_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


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

item_main.xml源码(RecyclerView中item)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--
    CardView就是一个卡片样式的FrameLayout。

    参数介绍:
        app:cardBackgroundColor  :   背景颜色
        app:cardCornerRadius    :   设置圆角。
        app:cardElevation       :    阴影。
        app:cardMaxElevation    :       最大阴影。
        app:cardPreventCornerOverlap  : 在v20和之前的版本中添加内边距,
                                    这个属性是为了防止卡片内容和边角的重叠。

       app:cardUseCompatPadding  :  设置内边距,v21+的版本和之前的版本仍旧具有一样的计算方式
-->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_cardview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:cardBackgroundColor="@color/main_blue_light"
    app:cardCornerRadius="4dp"
    app:cardElevation="5dp"
    app:cardMaxElevation="10dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true">

    <TextView
        android:id="@+id/id_textview"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@color/main_white"
        android:textSize="30sp" />

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

menu_nav.xml的源码(NavagationView中菜单)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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/nav_menu_home"
            android:icon="@mipmap/ic_home_white_48dp"
            android:title="主页" />

        <item
            android:id="@+id/nav_menu_categories"
            android:icon="@mipmap/ic_sort_by_alpha_white_48dp"
            android:title="分类" />

        <item
            android:id="@+id/nav_menu_feedback"
            android:icon="@mipmap/ic_message_white_48dp"
            android:title="反馈" />
        <item
            android:id="@+id/nav_menu_setting"
            android:icon="@mipmap/ic_settings_white_48dp"
            android:title="设置" />

    </group>
</menu>

header_nav.xml源码(NavagationView的head)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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="220dp"
    android:background="@drawable/ic_user_background"
    android:gravity="center"
    android:orientation="vertical">

        <!--
            一个显示圆形头像的自定义ImageView
        -->
    <com.sunjiajia.androidnewwidgetsdemo.view.RoundedImageView
        android:id="@+id/id_header_face"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:scaleType="fitXY"
        android:src="@drawable/author" />

    <TextView
        android:id="@+id/id_header_authorname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/header_author_name"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/id_header_url"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/header_author_url"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
</LinearLayout>

Java代码

Java代码写法比较简单,这里只给出RecyclerView.Adapter的写法(包括item点击事件)。

###RecyclerView.Adapter写法源码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
package com.sunjiajia.androidnewwidgetsdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.sunjiajia.androidnewwidgetsdemo.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Monkey on 2015/6/29.
 */
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewHolder> {

    // 点击事件接口
    public interface OnItemClickListener {
        void onItemClick(View view, int position);

        void onItemLongClick(View view, int position);
    }

    public OnItemClickListener mOnItemClickListener;

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }


    public Context mContext;
    public List<String> mDatas;
    public LayoutInflater mLayoutInflater;

    public MyRecyclerViewAdapter(Context mContext) {
        this.mContext = mContext;
        mLayoutInflater = LayoutInflater.from(mContext);
        // 这里是模拟数据。
        mDatas = new ArrayList<>();
        for (int i = 'A'; i <= 'z'; i++) {
            mDatas.add((char) i + "");
        }
    }

    /**
     * 创建ViewHolder
     */
    @Override
    public MyRecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View mView = mLayoutInflater.inflate(R.layout.item_main, parent, false);
        MyRecyclerViewHolder mViewHolder = new MyRecyclerViewHolder(mView);
        return mViewHolder;
    }

    /**
     * 绑定ViewHoler,给item中的控件设置数据
     */
    @Override
    public void onBindViewHolder(final MyRecyclerViewHolder holder, final int position) {
        //点击事件在这里实现,主要是利用RecyclerView中填充的布局控件可以被点击这个原理
        if (mOnItemClickListener != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mOnItemClickListener.onItemClick(holder.itemView, position);
                }
            });

            // 长点击事件
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    mOnItemClickListener.onItemLongClick(holder.itemView, position);
                    return true;
                }
            });

        }

        holder.mTextView.setText(mDatas.get(position));
    }

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

MyRecyclerViewHolder.java源码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
package com.sunjiajia.androidnewwidgetsdemo.adapter;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

import com.sunjiajia.androidnewwidgetsdemo.R;

/**
 * Created by Monkey on 2015/6/29.
 */
public class MyRecyclerViewHolder extends RecyclerView.ViewHolder {

    public TextView mTextView;

    public MyRecyclerViewHolder(View itemView) {
        super(itemView);
        mTextView = (TextView) itemView.findViewById(R.id.id_textview);
    }
}

结语

在源码中学习Android,是有种身临其境的感觉的。

整个Demo的源码我放在了GitHub上,谢谢star一下~ 在看源码过程中如果发现什么问题,请在留言,看到一定回复。

源码地址: AndroidNewWidgetsDemo

##清纯妹子

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015/07/02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Android--AppBarLayout基本使用
1.scroll--最基础的模式,并且设置其他模式必须|上它,否则不起效果 如果滚动到顶部再往上滑动的话,则显示Toolbar,只要往下滑动,则Toolbar消失
aruba
2020/07/03
3.5K0
Android--AppBarLayout基本使用
Material Design 实战 之第五弹 —— 下拉刷新(SwipeRefreshLayout)
SwipeRefreshLayout即是实现下拉刷新功能的核心类,它由support-v4库提供的。
凌川江雪
2018/10/09
1.2K0
Material Design 实战 之第五弹 —— 下拉刷新(SwipeRefreshLayout)
Android--AppBarLayout、CollapsingToolbarLayout组合使用
通常AppBarLayout和CollapsingToolbarLayout是一起使用的,也就是CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar常常是组合应用的,AppBarLayout能够赋予Toolbar显示和消失的功能,而CollapsingToolbarLayout能够赋予Toolbar伸缩的功能 AppBarLayout下只能有一个控件,而CollapsingToolbarLayout需要包裹Toolbar外,还支持包裹其
aruba
2020/07/03
3.6K0
Android--AppBarLayout、CollapsingToolbarLayout组合使用
CoordinatorLayout打造折叠式的顶部标题栏
如果以上简单操作无法满足你的需求,最后附上参考博客文章 Android开发之CoordinatorLayout打造滑动越界弹性放大图片效果 使用CoordinatorLayout打造各种炫酷的效果
木溪bo
2018/12/27
2.1K0
高仿支付宝9.9.2版本生活模块界面来讲解CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout
是不是很像支付宝的效果呢,我们今天就要通过讲解android5.0新出的控件CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout来实现这个效果。
HelloJack
2018/08/28
1.1K0
高仿支付宝9.9.2版本生活模块界面来讲解CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout
CoordinatorLayout与滚动的处理
本博文专门讲解和CoordinatorLayout相关的知识点,这也是Design Support Library中最重要与最难的部分。
小小工匠
2021/08/16
8210
android design 新控件
最近在研究android 开发的新控件,包括drawer layout ,NavigationView,CoordinatorLayout,AppBarLayout,Toolbar,TabLayout,SwipeRefreshLayout,Recyclerview等。
方志朋
2022/11/30
6680
android design 新控件
Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout
上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,能不能把Toolbar往下拉动呢?这里要明确一点,Toolbar本身是页面顶部的工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?所以Toolbar的上部边缘是不可以往下拉的,只有下部边缘才能往下拉,这样的视觉效果好比Toolbar如电影幕布一般缓缓向下展开。 不过,Android在实现展开效果的时候,并非直接让Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题栏的展开和收缩行为。下面是CollapsingToolbarLayout的属性说明: app:contentScrim : 指定布局内部未展开时的背景颜色。 app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。 app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。 app:collapsedTitleGravity : 指定未展开时的标题文字对齐方式。 app:expandedTitleTextAppearance : 指定展开后的标题文字字体。 app:expandedTitleTextColor : 指定展开后的标题文字颜色。 app:expandedTitleGravity : 指定展开后的标题文字对齐方式。 app:expandedTitleMargin : 指定展开后的标题四周间距。 app:expandedTitleMarginStart/app:expandedTitleMarginTop/app:expandedTitleMarginEnd/app:expandedTitleMarginBottom : 指定展开后的标题具体方向的间距。 上述属性在代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。 setCollapsedTitleTextAppearance : 设置未展开时的标题文字字体。 setCollapsedTitleTextColor : 设置未展开时的标题文字颜色。 setCollapsedTitleGravity : 设置未展开时的标题文字对齐方式。 setExpandedTitleTextAppearance : 设置展开后的标题文字字体。 setExpandedTitleColor : 设置展开后的标题文字颜色。 setExpandedTitleGravity : 设置展开后的标题文字对齐方式。 setExpandedTitleMargin : 设置展开后的标题四周间距。 setExpandedTitleMarginStart/setExpandedTitleMarginTop/setExpandedTitleMarginEnd/setExpandedTitleMarginBottom : 设置展开后的标题具体方向的间距。 在工程中使用CollapsingToolbarLayout,则需注意以下几点: 1、添加几个库的支持,包括appcompat-v7库(Toolbar需要)、design库(CollapsingToolbarLayout需要)、recyclerview库(主页面的RecyclerView需要); 2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout,因为design库的动态效果都依赖于该控件; 3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"; 4、使用android.support.design.widget.AppBarLayout节点包裹android.support.design.widget.CollapsingToolbarLayout节点,再在CollapsingToolbarLayout节点下添加Toobar; 5、Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways",声明工具栏的滚动行为标志; 其实真正运行的时候,Toolbar的高度是固定不变的,变化高度的是CollapsingToolbarLayout。只是许多App把这两者的背景设为一样的,所以看起来像是统一的标题栏在收缩和展开。既然二者原本不是一家,那么就得有新的属性用于区分它们内部的行为,新属性在Collaps
aqi00
2019/01/18
3.3K0
【Android】这效果,我没法描述
前言 最近接到一个需求,这需求让我表示很尴尬。(下面是一些废话) 要求的效果是这样的,顶部有部分悬浮,接着是一些布局,在下面是几个可切换的Tab页面,然后滚动的时候~~吧啦吧啦吧啦吧啦~~ 还是
Gavin-ZYX
2018/05/18
1K0
CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件
从官方文档中我们可以看到: CoordinatorLayout是一个增强型的FrameLayout。 两个作用: - As a top-level application decor or chrome layout - As a container for a specific interaction with one or more child views
小小工匠
2021/08/16
2.2K0
Android开发笔记(一百三十五)应用栏布局AppBarLayout
Android5.0推出工具栏Toolbar用来替代ActionBar,灵活性和易用性大大增强,有关Toolbar的详细介绍参见《Android开发笔记(一百一十九)工具栏Toolbar》。 可是仅仅使用Toolbar的话,还是有些呆板,比如说Toolbar固定占据着页面顶端,既不能跟着主体页面移上去,也不会跟着主体页面拉下来。为了让App页面更加生动活泼,势必要求Toolbar在某些特定的场景上移或者下拉,如此才能满足酷炫的页面特效需要。那么Android5.0也同时给出了相应的解决方案,即推出MaterialDesign库,通过该库中的AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏的动态变化效果。 AppBarLayout其实继承自LinearLayout,所以具备LinearLayout的所有属性与方法。对于大家关心的额外功能,则主要有以下几点: 1、支持响应主体页面的滑动行为,即在主体页面上移或者下拉时,AppBarLayout能够捕捉到主体页面的滚动操作; 2、AppBarLayout捕捉到滚动操作之后,还要通知头部控件(通常是Toolbar),告诉头部控件你要怎么滚,是爱咋咋滚,还是满大街滚; 具体到实现上,要在工程中做以下修改: 1、添加几个库的支持,包括appcompat-v7库(Toolbar需要)、design库(AppBarLayout需要)、recyclerview库(主页面的RecyclerView需要); 2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout,因为design库的动态效果都依赖于该控件; 3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"; 4、使用android.support.design.widget.AppBarLayout节点包裹Toobar; 5、Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways",声明工具栏的滚动行为标志; 6、演示页面的主体页面使用RecyclerView控件,并给该控件节点添加行为属性app:layout_behavior="@string/appbar_scrolling_view_behavior",表示通知AppBarLayout捕捉RecyclerView的滚动操作。 下面是AppBarLayout结合RecyclerView实现的工具栏向上滚动效果截图:
aqi00
2019/01/18
2K0
Material Design 实战 之第四弹 —— 卡片布局
首先这里准备用CardView来填充主题内容, CardView是用于实现卡片式布局效果的重要控件,由appcompat-v7库提供。 实际上,CardView也是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体的感觉。
凌川江雪
2018/10/09
2.2K0
Material Design 实战 之第四弹 —— 卡片布局
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
这是一个比较常见的APP首页的结构,侧边栏+主页,侧边栏里是一些菜单,主页由底部菜单控制内容区,内容区是可滑动的子页面。整体比较舒服合理,各自为阵,却又能关联在一起,加上又是大众喜爱的Material Design风格,所以成为了当下APP首页的主流结构。
yechaoa
2022/06/10
1.3K0
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
Android之MaterialDesign应用技术
  PS:纵观现在大大小小软件的界面都变的比较漂亮,还有一些系统了,比如小米的MIUI,华为的EMUI等,虽然底层都是安卓,但他们的界面多多少少都会不同,谷歌对这个UI也是非常重视的,MaterialDesign就是今天的主角,首先在看这个的同时,要搞清楚什么是Material Design,百度百科解释,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。design,中文是设计之意,即“设想和计划
cMusketeer
2018/03/28
1.3K0
Android之MaterialDesign应用技术
NestedScrollView 嵌套 ListView 实现滑动折叠效果
引言 最近,在做公司一个design折叠效果的时候遇到个问题,就是我们本身app的方法数太多了,dex分包技术还没搞定。不得不尽量缩减一些不必要的包、类。当我们引入RecyclerView的时候,恰好
用户1127566
2018/06/06
3.5K0
用 CoordinatorLayout 处理滚动
原文地址:Handling Scrolls with CoordinatorLayout 原文作者:CODEPATH 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Feximin 总览 CoordinatorLayout 扩展了完成 Google's Material Design 中的多种滚动效果的能力。目前,此框架提供了几种不需要写任何自定义动画代码就可以(使动画)工作的方式。这些效果包括: 上下滑动 Floating Action Button 以给 Sn
Android 开发者
2018/05/31
4.9K0
MaterialDesign之FloatingActionButton
就是上面这样了,忘说了一件很重要的事情……FloatingActionButton的监听就是最原始的监听!!!接下来到了重头戏了
蜻蜓队长
2018/08/03
7130
MaterialDesign之FloatingActionButton
Floating Action Button-Android M新控件
浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。因为一个浮动在UI之上的圆形图标而显得格外突出,同时它还具有特殊的手势行为”
小小工匠
2021/08/16
1.5K0
Material Design 在 Android 中的应用
我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当做任务进行分享。 程序员因为较为腼腆,分享的人较少,大部分都是客户部、分析部或者推广部的分享,久而久之,氛围就比较消极。
蜻蜓队长
2018/08/03
1.3K0
Material Design 在 Android 中的应用
推荐阅读
相关推荐
Android--AppBarLayout基本使用
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验