Android Design框架

最新推荐文章于 2022-05-22 00:51:22 发布
最新推荐文章于 2022-05-22 00:51:22 发布
阅读量189 收藏
点赞数
文章标签： 移动开发
原文链接：https://my.oschina.net/glfei/blog/2960791
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

1.ToolBar

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE); //必须在setContentView之前
        setContentView(R.layout.activity_tool_bar);
        mTool = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mTool);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.tool_menu,menu);

        MenuItem item1 = menu.findItem(R.id.lover1);
        MenuItem item2 = menu.findItem(R.id.lover2);
        MenuItem item3 = menu.findItem(R.id.lover3);

        item1.setTitle("心情好");
        SpannableString sbs = new SpannableString(item1.getTitle());
        sbs.setSpan(new ForegroundColorSpan(Color.RED),0,1,0);
        sbs.setSpan(new ForegroundColorSpan(Color.YELLOW),1,2,0);
        sbs.setSpan(new ForegroundColorSpan(Color.BLUE),2,3,0);
        item1.setTitle(sbs);

//        item2.setTitle("天气好");
        String stsHtml = "<font color='#ff6f00'>天</font><font color='#00b7ff'>气</font>好";
        item2.setTitle(Html.fromHtml(stsHtml));
        item3.setTitle("吃饭香");

        return super.onCreateOptionsMenu(menu);
    }

2.Percent 百分比布局

<android.support.percent.PercentRelativeLayout ...>

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#909090"
        app:layout_widthPercent="80%"
        app:layout_heightPercent="20%"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffa200"
        android:layout_alignParentRight="true"
        app:layout_widthPercent="20%"
        app:layout_heightPercent="80%"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00bafd"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:layout_widthPercent="80%"
        app:layout_heightPercent="20%"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#1aff00"
        android:layout_alignParentBottom="true"
        app:layout_widthPercent="20%"
        app:layout_heightPercent="80%"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff00fb"
        android:layout_centerInParent="true"
        app:layout_widthPercent="60%"
        app:layout_heightPercent="60%"
        />
</android.support.percent.PercentRelativeLayout>

e8fd8ff5959e2c19c47193cb66c7bd626c8.jpg

3.FloatingActionButton 浮动按钮

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

    <!--
    backgroundTint:设置颜色
    pressedTranslationZ:点击时的阴影大小
    fabSize:确定floatingactionbutton大小
    -->
    <android.support.design.widget.FloatingActionButton
        android:layout_margin="10dp"
        android:onClick="clickButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_home"
        android:layout_gravity="bottom|right"
        app:backgroundTint="#90909090"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:rippleColor="#ff4d00"
        />
</android.support.design.widget.CoordinatorLayout>

4.Snackbar

public void clickButton(View view) {
    Snackbar snackbar = Snackbar.make(view,"你说什么？",Snackbar.LENGTH_SHORT);

    snackbar.setAction("广告", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(FloatActionActivity.this, "广告打得好,不如新飞冰箱好", Toast.LENGTH_SHORT).show();
        }
    });
    snackbar.setActionTextColor(Color.YELLOW);

    View mView = snackbar.getView();
    mView.setBackgroundColor(Color.BLUE);
    TextView mText = (TextView) mView.findViewById(android.support.design.R.id.snackbar_text);
    mText.setText("杀白猪爆金条");
    mText.setTextColor(Color.RED);
    snackbar.show();
}

5.TextInputEditText 文本输入布局

<android.support.design.widget.TextInputEditText
    android:id="@+id/input_user_edit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入用户名" />

d433a665e3765fe189a3dc38089abd63554.jpg

    public void login(View view) {

        String user = mUserEdit.getText().toString();

        if(user!=null&&user.isEmpty()){
            //设置错误提示
            mUserLayout.setError("用户名不能为空");
            return;
        }else{
            //隐藏错误提示
            mUserLayout.setErrorEnabled(false);
        }
        ...
    }

6.TabLayout 选项卡

    private void initTab() {
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTabLayout.addTab(mTabLayout.newTab().setCustomView(createCustomView()).setText("娃哈哈").setIcon(R.drawable.ic_home));
        mTabLayout.addTab(mTabLayout.newTab().setCustomView(createCustomView()).setText("娃哈哈").setIcon(R.drawable.ic_home));

        mTabLayout.setTabTextColors(Color.WHITE,Color.RED);

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            /**
             * 当TAB选中的时候
             * @param tab
             */
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView view = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
                view.setTextColor(Color.RED);
            }

            /**
             * 当TAB解除选中
             * @param tab
             */
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView view = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
                view.setTextColor(Color.WHITE);
            }

            /**
             * 再次被选中
             * @param tab
             */
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                TextView view = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
                view.setTextColor(Color.YELLOW);
            }
        });

//        mTabLayout.setSelectedTabIndicatorColor();        指示器颜色
        mTabLayout.setSelectedTabIndicatorHeight(2);       //指示器高度

//        mTabLayout.setupWithViewPager();                  //关联ViewPager
    }

    private View createCustomView(){
        View view = LayoutInflater.from(this).inflate(R.layout.tab_item, null);
        return view;
    }

7.NavigationView 导航

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

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

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

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

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/view_head"
        app:menu="@menu/navigation_menu" />
</android.support.v4.widget.DrawerLayout>

navigation_menu.xml

2bdcb95534cd8a23ad0a1cd8c6127752c00.jpg

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/id_01"
            android:icon="@drawable/ic_home"
            android:title="一"
            />
        <item
            android:id="@+id/id_02"
            android:icon="@drawable/ic_home"
            android:title="二"
            />
        <item
            android:id="@+id/id_03"
            android:icon="@drawable/ic_home"
            android:title="三"
            />
    </group>

    <item android:title="More">
        <menu>
            <item
                android:id="@+id/id_04"
                android:title="Setting"
                android:icon="@mipmap/ic_launcher"
                />
        </menu>
    </item>
</menu>

594af10c8bb0c70dac155839da1e188dba7.jpg

8.CoordinatorLayout 协调布局

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

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="ToolBar" />

        <android.support.design.widget.TabLayout
            ...
            app:layout_scrollFlags="scroll|enterAlways"
            >

            <android.support.design.widget.TabItem
                ...
                android:text="TabLayout" />
        </android.support.design.widget.TabLayout>

        <ImageView
            app:layout_scrollFlags="scroll|enterAlways"
            ... />
    </android.support.design.widget.AppBarLayout>

    <!--嵌套滚动视图 RecycleView NestedScrollView-->
    <android.support.v4.widget.NestedScrollView
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <LinearLayout
            ...
            android:orientation="vertical">

            <TextView
                ...
                android:layout_margin="20dp"
                android:text="1234567" />

            <TextView ... />

            <TextView ... />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

1b7cf75938cc201c461842e2b0bfe997fb6.jpg

9.CollapsingToolBarLayout 折叠布局

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        ...>

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:title="TEST">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
                app:layout_collapseMode="pin"/>


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

    <android.support.v4.widget.NestedScrollView
        ...>

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


    <android.support.design.widget.FloatingActionButton
        android:src="@drawable/ic_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|center"
        android:layout_margin="10dp"
        />
</android.support.design.widget.CoordinatorLayout>

c9665930390cc0590c67d2a89e767f0b8fc.jpgbc97fe179ccdc10798b8b93915493bd8483.jpg

10.CoordinatorLayout.Behavior之move

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

    <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="left"
        android:background="#00d0ff"
        android:gravity="center"
        android:onClick="move"
        android:text="第一个"
        android:textColor="#ffffff" />

    <TextView
        android:onClick="move"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:background="#ff9900"
        android:gravity="center"
        android:text="第二个"
        android:textColor="#ffffff"/>

    <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="right"
        android:background="#ff9900"
        android:gravity="center"
        android:text="第三个"
        android:textColor="#ffffff"
        app:layout_behavior="com.coordinatorLayout_behavior.MoveBehavior" />

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

128e8d63e143f28edce088d60c0d270f9b8.jpg

public class MoveBehavior extends CoordinatorLayout.Behavior<TextView>{

    public MoveBehavior(Context context, AttributeSet attr){
        super(context,attr);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {
        return dependency instanceof  TextView;
    }

    /**
     * 当我们关系的视图发生改变的时候
     * @param parent        父布局
     * @param child         设置behavior的布局
     * @param dependency    关心的布局
     * @return
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {
        int top = dependency.getTop() - child.getTop();
        ViewCompat.offsetTopAndBottom(child,top);//设置该Behavior的TextView随dependency的移动而移动
        return true;
    }

}

11.CoordinatorLayout.Behavior之Scroll

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#ff9900">

        <LinearLayout
            ...>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:gravity="center"
                android:text="滚动"
                android:textColor="#ffffff" />
            ...
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <android.support.v4.widget.NestedScrollView
        android:layout_gravity="right"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#009dff"
        app:layout_behavior="com.coordinatorLayout_behavior.ScrollBehavior">

        <LinearLayout
            ...>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:gravity="center"
                android:text="滚动"
                android:textColor="#ffffff" />
            ...
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

public class ScrollBehavior extends CoordinatorLayout.Behavior<View>{
    public ScrollBehavior(Context context, AttributeSet attr){
        super(context,attr);
    }


    /**
     * 启动滚动
     * @param coordinatorLayout         父布局
     * @param child                      关联的Behavior的视图
     * @param directTargetChild         目标子视图
     * @param target                     关心的视图
     * @param nestedScrollAxes          滚动的方向
     * @return
     */
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        //按位与 非0 为真  SCROLL_AXIS_HORIZONTAL
        return (nestedScrollAxes& ViewCompat.SCROLL_AXIS_VERTICAL)!=0;
    }

    /**
     * 视图滚动的时候
     * @param coordinatorLayout     父布局
     * @param child                  behavior的视图
     * @param target                 关心的视图
     * @param dx                      横向移动的像素
     * @param dy                      竖向移动的像素
     * @param consumed
     */
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        int scrollY = target.getScrollY();
//        child.setScaleY();
        child.setScrollY(scrollY);
    }


    /**
     * 快速滑动
     * @param coordinatorLayout     父布局
     * @param child                  设置Behavior的视图
     * @param target                 所关心的那个
     * @param velocityX             速度X
     * @param velocityY             速度Y
     * @param consumed
     * @return
     */
    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
        if(child instanceof NestedScrollView){
            ((NestedScrollView)child).fling((int) velocityY);
        }
        return true;
    }
}

12.BottomNavigation 底部导航

0bb9f6c941db26eca8954b12c46e9d59dc6.jpg07fa2b683ea48f90f6c5bf818d92925a234.jpg

f19a0e000cf332cd171733a4b8b5287f733.jpg222ad897a5361ac8307f89ec08c548c7660.jpg

334ff1dbd8a63baecb527440a0e991bbed4.jpg35d33a36c83baefbddd1bdf6315bed8b158.jpg

e83da1fd72e9d9a1491c92b167c55077528.jpg66cb1fafe90bd6c5e1592b48aadf7424d6f.jpg

13.StyleColor

d2c9e3adc219aeda971e122bec56c3edf52.jpg

转载于:https://my.oschina.net/glfei/blog/2960791

weixin_34075551
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android Material Design 各控件demo
09-11
包括沉浸式，网易侧滑栏，recycleview，dreamlayout、tablelayout等，示例详尽，粘贴可用。
android 框架解析,AndroidDesign框架解析
weixin_35778603的博客
05-27 491
一.AndroidDesign框架特点：自动化高，层级分明；窗口职责化，查错效率高；各级结构标准化，混乱代码易优化；勿须重构智能化，各司其职模块化。二.AndroidDesign框架包含的主要模块1.中转站(网络+数据库+其它)框架核心模块，重要级别为最高。外异内同方式搭建。自动输出网络信息[url,param,status]到手机日志，点击url可查看原Json数据，点击Json中的url[如图...
笔记——android_uI页面设计基础
m0_64478952的博客
05-22 3298
一个不会Android的人，从哪里开始学呢？本章将带初学者进入Android的会客厅，当然先需要Java语言基础，并安装好Android Studio开发工具。 当我们打开手机里的一款App时，首先看到的便是App页面，本章将教初学者如何快速把握Android页面设计的核心，设计一个App页面，并能做一定的交互。 3.1 布局文件 页面文件在Android里叫布局文件，当我们在Android Studio工具里创建好一个项目后，布局文件所在位置是项目的【res】目录下的【layou...
PM的自我修养——关于AndroidDesign的一些基础知识
叶与诗
04-14 1241
这篇日志来自于一个问题：独立 Android 开发者如何零基础学习 UI 设计并设计出符合 Android Design 的作品？
Android开发之design库学习
AnalyzeSystem的博客
08-16 4000
design库学习
android多板面式布局,Android Design
weixin_30673759的博客
05-26 283
开发者文档Building a Dynamic UI with Fragments为 Android 开发应用时，要注意有各种屏幕尺寸的设备能够运行 Android 系统。确保你的应用在各种设备上始终能够提供平衡且美观的布局。通过“面板”可以帮助你做到这一点。当屏幕上有很多横向空间时，多个“面板”可以组合成一个复合视图，而在小屏幕上，则可以将它们分割成多个视图。将多个面板组合在同一屏幕中在小型设备...
Android最新支持包Design简介
weixin_30945039的博客
06-01 176
Android5.0Lollipop是曾经最著名的Android发布之一，这样说很大一部分原因是材料设计的引入，而材料设计则是一种刷新了整个Android体验的设计语言。这个详细说明是开始适应材料设计的好地方，但是也可以理解，材料设计对于开发人员来说是一个巨大的挑战，尤其是关注应用向后兼容的开发人员。有了来自AndroidDesignSupportLibrary的些许帮助...
Android Design - 设计风格
捣乱的博客
07-15 1082
48 dp 的设计韵律 一般来说，可触摸控件以 48 dp 为基础单位。 为什么是 48 dp？ 一般情况下，48 dp 在设备上的物理大小是 9 mm (会有一些变化)。这刚好在触摸控件推荐的大小范围 (7-10 mm) 内，而且这样的大小，用户用手指触摸起来也比较准确、容易。 如果你设计的元素都至少有 48 dp 的高度和宽度，那么可以保证: 你设计的
android design安装教程,android design
weixin_30359591的博客
06-03 342
android design materialchange text appearanceandroid:textAppearance="?android:textAppearanceMediumandroid:background="#2196F3"android开发网站layouttextView中的layout_width其实是viewGroup的属性，用来进行大小设定位置设定。而textV...
android design 新控件
热门推荐
方志朋的专栏
07-10 1万+
最近在研究android 开发的新控件，包括drawer layout ,NavigationView,CoordinatorLayout,AppBarLayout,Toolbar,TabLayout,SwipeRefreshLayout,Recyclerview等。先上效果图： 主界面上drawlayou 和NavigationView形成抽屉效果，布局文件如下：<android.sup
android design demo
07-08
android design recyclerview toolbar coordinationlayout cardview
Android Design 控件的使用
09-16
博客地址：http://blog.csdn.net/u011051627/article/details/48246205 环境是基于androidstudio的。然后具体介绍可以看博客，都是android Design各个控件的使用。
android design
09-06
android design android设计模式 保包常用设计模式 template 觀察者模式 責任鏈模式 工廠模式 單利模式 適配器模式等等23种模式
Android Material Design 兼容库控件使用（二）
11-27
Android Material Design 兼容库控件使用（二）
内含各个版本的android-support-design包
08-21
内含各个版本的android-support-design包内含各个版本的android-support-design包
android MVP 框架 & 通用模块
06-01
> - 开发中的顶级父类组件，如：SuperActivity,SuperFragment,SuperModel,SuperPresenter > - 网络当然也是必不可少，给 OkHttp 添加日志拦截器 LogInterceptor，添加请求头的...> - UI设计尽量遵循 Material Design
Android中MVP+Retrofit+Rxjava框架的demo
08-15
具体的demo介绍请看我的博客介绍(http://blog.csdn.net/qq137722697)
design_android
04-30
设计模式读书笔记 1.图片框架单一原则
Android代码-一款用心去做的Android 换肤框架
08-06
Android-skin-support: 一款用心去做的Android 换肤框架, 极低的学习成本, 极好的用户体验. 只需要两行代码, 就可以实现换肤, 你值得拥有!!! 第一行: 在Application的onCreate中初始化 SkinCompatManager.init(this)...
android代码框架
最新发布
09-19
1. AndroidFire：一款基于Material Design、MVP、RxJava、Retrofit和Glide的新闻阅读App框架，适用于快速开发Android应用程序。 2. XSnow：一个基于RxJava2和Retrofit2精心打造的Android基础框架，包含网络、上传、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值