MaterialDesign

Toolbar
styles.xml文件
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"


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


toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);




drawerLayout


<android.support.v4.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<FrameLayout
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"


        ></android.support.v7.widget.Toolbar>
</FrameLayout>
<TextView
        android:layout_gravity = "start" //第2个控件的layout_gravity必须指定
        android:text="sfdsafasf"
        android:textSize="30sp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


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


drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);
        }


 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){


      case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;




NavigationView


compile 'com.android.support:design:26.0.0-alpha1'
    compile 'de.hdodenhof:circleimageview:2.1.0'


创建menu
<?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_call"
            android:title="Call"
            android:icon="@mipmap/ic_launcher"/>
        <item
            android:id="@+id/nav_position"
            android:title="Position"
            android:icon="@mipmap/ic_launcher"/>
        <item
            android:id="@+id/nav_mail"
            android:title="Mail"
            android:icon="@mipmap/ic_launcher"/>






    </group>


</menu>
创建头部xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:background="@color/colorPrimary"
    android:layout_height="180dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
        android:layout_width="70dp"
        android:layout_height="70dp" />
    <TextView
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:text="dsfsf@gmail.com"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/name"
        android:layout_above="@id/mail"
        android:text="dsfsf"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />






</RelativeLayout>




<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"


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


 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                drawerLayout.closeDrawers();
                return true;
            }
        });




FloatingActionButton
<android.support.design.widget.FloatingActionButton
        android:id="@+id/floating_button"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_launcher"
        app:elevation="8dp" 悬浮高度
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.floating_button);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"你点击了floatingButton",Toast.LENGTH_SHORT).show();
            }
        });




Snackbar
Snackbar.make(view,"删除",Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Toast.makeText(MainActivity.this,"你点击了Undo",Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();


CoordinatorLayout 加强板的Framlayout
android.support.design.widget.CoordinatorLayout




CardView
  compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
    compile 'com.android.support:cardview-v7:26.0.0-alpha1'
    compile 'com.github.bumptech.glide:glide:3.7.0'


<android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>




<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    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="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/fruit_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="100dp" />
        <TextView
            android:id="@+id/fruit_name"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


    </LinearLayout>


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




public class Fruit {
    private String name;
    private int imageId;


    public Fruit() {
        super();
    }


    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }


    public String getName() {
        return name;
    }


    public void setName(String name) {
        this.name = name;
    }


    public int getImageId() {
        return imageId;
    }


    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
}








public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {


    private  List<Fruit> mFruitList;
    private Context mContext;


    static class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;
        public ViewHolder(View itemView) {
            super(itemView);
            cardView = itemView.findViewById(R.id.card_view);
            fruitImage = itemView.findViewById(R.id.fruit_image);
            fruitName = itemView.findViewById(R.id.fruit_name);
        }
    }
    public FruitAdapter( ) {
        super();
    }


    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(mContext == null){
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);
        return new ViewHolder(view);
    }


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


    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {


        Fruit fruit = mFruitList.get(position);
        holder.fruitName.setText(fruit.getName());
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }
}






 private Fruit[] fruits = {new Fruit("Apple",R.mipmap.ic_launcher),new Fruit("Pineapple",R.mipmap.ic_launcher),new Fruit("Orange",R.mipmap.ic_launcher)
            ,new Fruit("Pear",R.mipmap.ic_launcher),new Fruit("Banana",R.mipmap.ic_launcher),new Fruit("Lizhi",R.mipmap.ic_launcher)};
    private List<Fruit> fruitList = new ArrayList<>();






 initFruits();
        RecyclerView re = (RecyclerView) findViewById(R.id.recycler_view);
        GridLayoutManager manager = new GridLayoutManager(this,3);
        re.setLayoutManager(manager);
        adapter = new FruitAdapter(fruitList);
        re.setAdapter(adapter);




    }


    private void initFruits() {
        fruitList.clear();
        for (int i = 0; i <50 ; i++) {
            Random r = new Random();
            int index = r.nextInt(fruits.length);
            fruitList.add(fruits[index]);


        }
    }




AppBarLayout


<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"


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


    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>






下拉刷新
<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipe"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>




 swipe = (SwipeRefreshLayout) findViewById(R.id.swipe);
        swipe.setColorSchemeResources(R.color.colorPrimary);
        swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshFruits();
            }
        });




    }


    private void refreshFruits() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                }catch (Exception e){
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initFruits();
                        adapter.notifyDataSetChanged();
                        swipe.setRefreshing(false);
                    }
                });
            }
        }).start();
    }








CollapsingToolbarLayout


<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:id="@+id/activity_fruit"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.materialdesigndemo.Fruit_Activity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/fruit_image_view"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar2"
                app:layout_collapseMode="pin"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.CardView
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_margin="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </android.support.v7.widget.CardView>
        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end"


        />


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






Intent intent = getIntent();
        String fruitName = intent.getStringExtra("fruit_name");
        int fruitImageId = intent.getIntExtra("fruit_image_id",0);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar2);
        CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        ImageView fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);
        TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        collapsingToolbarLayout.setTitle(fruitName);
        Glide.with(this).load(fruitImageId).into(fruitImageView);
        String fruitContent = generaterFruitContent(fruitName);
        fruitContentText.setText(fruitContent);


    }


    private String generaterFruitContent(String fruitName) {
        StringBuilder fruitContent = new StringBuilder();
        for (int i = 0; i <5000 ; i++) {
            fruitContent.append(fruitName);


        }
        return fruitContent.toString();
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                break;
        }
        return true;
    }
}






 final ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = viewHolder.getAdapterPosition();
                Fruit fruit =mFruitList.get(position);
                Intent intent = new Intent(mContext,Fruit_Activity.class);
                intent.putExtra("fruit_name",fruit.getName());
                intent.putExtra("fruit_image_id",fruit.getImageId());
                mContext.startActivity(intent);
            }
        });
        return viewHolder;
### Material Design 指南与资源 Material Design 是一种由 Google 推出的设计语言,旨在通过统一的原则、视觉效果和交互模式提升用户体验。以下是关于 Material Design 的核心概念及其相关资源: #### 核心原则 1. **Tangible Surfaces (有形的外观)** 设计的核心之一是模拟现实世界的物理特性。UI 层次分明,每一层都有相应的阴影效果,这有助于突出焦点并构建清晰的层级结构[^2]。 2. **Motion (动态效果)** 动态效果被用来引导用户的注意力,增强操作反馈,并保持界面的一致性和连贯性。动画应自然流畅,避免突兀的变化。 3. **Typography (字体设计)** 字体的选择和排版对于可读性和美观至关重要。Google 提供了基于 Material Design 原则的字体比例生成器,支持自动调整和优化字体大小以提高易读性[^3]。 4. **Color & Theme (颜色与主题)** 材料设计强调色彩运用的重要性。推荐在深色主题下减少明亮、多彩的颜色使用,而 Android 版本的组件库提供了 `PrimarySurface` 样式来简化这一过程[^4]。 #### 资源汇总 - **官方文档**: 官方网站包含了详尽的设计指南和技术实现细节,适合设计师和开发人员共同学习。 - **UI Kits 和 Icons**: 可免费获取大量基于 Material Design 系统的 UI 工具包、图标集以及背景素材等[^1]。 - **开源项目**: GitHub 上有许多优秀的开源项目展示了如何实际应用 Material Design 到应用程序中。 - **在线工具**: 如 Figma 或 Adobe XD 插件可以帮助快速创建符合标准的设计原型。 ```python import android.graphics.Color; import com.google.android.material.color.MaterialColors; // 获取当前主题下的 primary color int primaryColor = MaterialColors.getColor(context, R.attr.colorPrimary, Color.BLACK); ``` 以上代码片段演示了如何利用 Material Components 库提取当前主题的主要颜色值。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值