material_materialcontainertransform - CSDN
精华内容
参与话题
  • 12个Material Design风格控件的使用

    万次阅读 多人点赞 2017-02-20 17:59:17
    项目在GitHub上的地址:https://github.com/Hebin320/MaterialDesignUseCSDN上的下载地址http://download.csdn.net/detail/hebin320320/96582151、AppBarLayout、ToolBarAppBarLayout 是继承...它是为了Material

    项目在GitHub上的地址:

    https://github.com/Hebin320/MaterialDesignUse

    CSDN上的下载地址

    http://download.csdn.net/detail/hebin320320/9658215


    1、AppBarLayout、ToolBar

    AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作。
    AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用。
    ToolBar是谷歌新推出的代替ActionBar的一个标题栏控件,能将背景拓展到状态栏,依赖包是v7,使用之前先把style中继承的主题改为NoActionBar;
    可以设置”标题”,”副标题”,”Logo”,”NavigationIcon”以及”Menu菜单”,也可以自定义布局;

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:fitsSystemWindows="true"
            >
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:layout_marginStart="0dp"
                android:gravity="center"
                android:text="@string/app_name"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:paddingTop="6dp"
                android:paddingRight="40dp"
                />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    TextView是一个居中的标题,
    fitsSystemWindows实现状态栏各版本适配方案:
    1.Android5.0以上:material design风格,半透明(APP 的内容不被上拉到状态)
    2.Android4.4(kitkat)以上至5.0:全透明(APP 的内容不被上拉到状态)
    3.Android4.4(kitkat)以下:不占据status bar
    在Activity中添加代码即可使用ToolBar;

            mToolbar = (Toolbar) findViewById(R.id.toolbar);
            tvToolTitle = (TextView) findViewById(R.id.toolbar_title);
            tvToolTitle.setText("测试");
            setSupportActionBar(mToolbar);
            getSupportActionBar().setDisplayShowTitleEnabled(false);

    这里写图片描述

    ToolBar中的菜单布局:

    <menu xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        xmlns:tools="http://schemas.android.com/tools"  
        tools:context=".MainActivity" >   
        <item  
            android:id="@+id/action_settings"  
            android:orderInCategory="100"  
            android:title="action_settings"  
            app:showAsAction="never"/>  
    
    </menu>  
    mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
        @Override  
        public boolean onMenuItemClick(MenuItem item) {  
            switch (item.getItemId()) {  
            case R.id.action_settings:  
                break;  
            default:  
                break;  
            }  
            return true;  
        }  
    });  

    2、DrawerLayout、NavigationView

    这里写图片描述

    DrawerLayout可以轻松的实现抽屉效果、在DrawerLayout中,第一个子View必须是显示内容的view,第二个view是抽屉view,设置属性layout_gravity=”left|right”,表示是从左边滑出还是右边滑出。
    使用前需添加:

    compile 'com.android.support:design:23.3.0'

    xml中的布局代码如下:

    <LinearLayout 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:orientation="vertical">
    
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:minHeight="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:fitsSystemWindows="true"
                >
                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="0dp"
                    android:layout_marginStart="0dp"
                    android:gravity="center"
                    android:text="@string/app_name"
                    android:textColor="#FFFFFF"
                    android:textSize="20sp"
                    android:paddingTop="6dp"
                    android:paddingRight="40dp"
                    />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.AppBarLayout>
    
    
        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">
    
            <!--第一个,显示的布局-->
            <android.support.design.widget.CoordinatorLayout
                android:id="@+id/main_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
                <FrameLayout
                    android:id="@+id/frame_content"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_below="@+id/appbar"
                    android:scrollbars="none"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
            </android.support.design.widget.CoordinatorLayout>
    
    
            <!--第二个,不显示的抽屉布局-->
            <android.support.design.widget.NavigationView
                android:id="@+id/navigation_view"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                app:headerLayout="@layout/navigation_header"
                app:menu="@menu/drawer" />
    
        </android.support.v4.widget.DrawerLayout>
    
    </LinearLayout>

    第一个布局使用的是Framelayout,可以通过侧滑抽屉栏的点击显示出不同的Fragment;
    而抽屉布局用的是NavigationView,NavigationView需要接收几个必要的参数、一个用于显示头部的布局以及用于显示选项的菜单布局;可在xml中直接添加布局;

         app:headerLayout="@layout/navigation_header"
         app:menu="@menu/drawer"

    头部布局xml代码:

    <LinearLayout 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="192dp"
        android:background="?attr/colorPrimaryDark"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="16dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">
    
    
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_image"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginTop="20dp"
            android:src="@mipmap/ic_launcher"
            app:border_color="@color/primary_light"
            app:border_width="2dp" />
    
    
        <TextView
            android:layout_marginTop="10dp"
            android:textSize="18sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="测试账号"
            android:gravity="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
             />
    
    </LinearLayout>

    选项菜单布局:

    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity">
        <group android:checkableBehavior="single">
            <item
                android:id="@+id/navigation_item_book"
                android:icon="@mipmap/ic_stars_black_24dp"
                android:title="测试" />
            <item
                android:id="@+id/navigation_item_example"
                android:icon="@mipmap/ic_brightness_7_black_24dp"
                android:title="测试" />
            <item
                android:id="@+id/navigation_item_blog"
                android:icon="@mipmap/ic_flare_black_24dp"
                android:title="测试" />
    
            <item
                android:id="@+id/navigation_item_about"
                android:icon="@drawable/ic_favorite"
                android:title="测试" />
        </group>
    </menu>

    配合ToolBar,在Activity中的使用代码:

    public class MainActivity extends AppCompatActivity implements BackHandledFragment.BackHandlerInterface {
    
        private DrawerLayout mDrawerLayout;
        private ActionBarDrawerToggle mDrawerToggle;
        private Toolbar mToolbar;
        private BackHandledFragment selectedFragment;
        private NavigationView mNavigationView;
        private TextView tvToolTitle;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mToolbar = (Toolbar) findViewById(R.id.toolbar);
            tvToolTitle = (TextView) findViewById(R.id.toolbar_title);
            setSupportActionBar(mToolbar);
            getSupportActionBar().setDisplayShowTitleEnabled(false);
            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
                    R.string.drawer_close);
            mDrawerToggle.syncState();
            mDrawerLayout.addDrawerListener(mDrawerToggle);
            mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
            setupDrawerContent(mNavigationView);
            switchToBook();
    
        }
    
    
        private void switchToBook() {
            getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new RecyclerFragment()).commit();
            tvToolTitle.setText("测试");
        }
    
        private void switchToExample() {
            getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new DayFragment()).commit();
            tvToolTitle.setText("测试");
        }
    
        private void switchToBlog() {
            getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new BlankFragment()).commit();
            tvToolTitle.setText("测试");
        }
    
        private void switchToAbout() {
            getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new TimeFragment()).commit();
            tvToolTitle.setText("测试");
        }
    
    
        private void setupDrawerContent(NavigationView navigationView) {
            navigationView.setNavigationItemSelectedListener(
                    new NavigationView.OnNavigationItemSelectedListener() {
                        @Override
                        public boolean onNavigationItemSelected(MenuItem menuItem) {
                            switch (menuItem.getItemId()) {
    
                                case R.id.navigation_item_book:
                                    switchToBook();
                                    break;
                                case R.id.navigation_item_example:
                                    switchToExample();
                                    break;
                                case R.id.navigation_item_blog:
                                    switchToBlog();
                                    break;
                                case R.id.navigation_item_about:
                                    switchToAbout();
                                    break;
    
                            }
                            menuItem.setChecked(true);
                            mDrawerLayout.closeDrawers();
                            return true;
                        }
                    });
        }
    
    
    
        @Override
        public void setSelectedFragment(BackHandledFragment backHandledFragment) {
            this.selectedFragment = backHandledFragment;
        }
    
    
        private long exitTime = 0;
    
        public void doExitApp() {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(this, R.string.press_again_exit_app, Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }
        }
    
        @Override
        public void onBackPressed() {
            if (selectedFragment == null || !selectedFragment.onBackPressed()) {
                if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
                    mDrawerLayout.closeDrawer(Gravity.LEFT);
                } else {
                    doExitApp();
                }
            }
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.test,menu);
            return true;
        }
    }

    3、RecyclerView、CardView、AutoScrollViewPager

    这里写图片描述
    RecyclerView是用于显示大量数据的控件,有点类似与ListView、GirdView,相较而言,RecyclerView在灵活性、体验感上都有一个较大的提升,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator可以实现丰富的功能,依赖包是v7;
    RecyclerView也能像ListView一样添加Header以及Footer,也可以通过addOnScrollListener进行分页加载;
    以Recyclerview添加Viewpager为Header为例子对Recyclerview进行简单的使用,Viewpager使用的是GitHub上的一个开源项目,实现自动轮播的AutoScrollViewPager;
    GitHub地址为:

    https://github.com/Trinea/android-auto-scroll-view-pager

    Header是通过GitHub上的一个开源项目RecyclerViewHeader,快速为Recyclerview添加Header;
    GitHub地址为:

    https://github.com/blipinsk/RecyclerViewHeader

    添加完依赖包之后即可进行应用。
    fragment_recyclerview.xml的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginBottom="20dp"
            />
    
        <com.bartoszlipinski.recyclerviewheader.RecyclerViewHeader
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginBottom="20dp"
            >
    
            <cn.trinea.android.view.autoscrollviewpager.AutoScrollViewPager
                android:id="@+id/vp_books"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                />
        </com.bartoszlipinski.recyclerviewheader.RecyclerViewHeader>
    </FrameLayout>

    recyclerview_item的代码:

    <?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="170dp"
        android:layout_margin="5dp"
        android:clickable="true"
        app:cardCornerRadius="4dp"
        app:cardElevation="10dp">
            <ImageView
                android:id="@+id/ivBook"
                android:transitionName="@string/transition_book_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                 />
    </android.support.v7.widget.CardView>

    RecyclerAdapter.class的代码

    public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
    
        private List<RecyclerBean> list = new ArrayList<>();
        private static final int ANIMATED_ITEMS_COUNT = 4;
        private Activity context;
        private boolean animateItems = false;
        private int lastAnimatedPosition = -1;
    
        public RecyclerAdapter(Activity context , List<RecyclerBean> mlist) {
            TypedValue mTypedValue = new TypedValue();
            context.getTheme().resolveAttribute(R.attr.selectableItemBackground, mTypedValue, true);
            list = updateItems(mlist,true);
            this.context = context;
        }
    
    
        public class ViewHolder extends RecyclerView.ViewHolder {
            public ImageView ivBook;
            public int position;
    
            public ViewHolder(View v) {
                super(v);
                ivBook = (ImageView) v.findViewById(R.id.ivBook);
            }
        }
    
    
        private void runEnterAnimation(View view, int position) {
            if (!animateItems || position >= ANIMATED_ITEMS_COUNT - 1) {
                return;
            }
    
            if (position > lastAnimatedPosition) {
                lastAnimatedPosition = position;
                view.setTranslationY(Utils.getScreenHeight(context));
                view.animate()
                        .translationY(0)
                        .setStartDelay(100 * position)
                        .setInterpolator(new DecelerateInterpolator(3.f))
                        .setDuration(700)
                        .start();
            }
        }
    
        public List<RecyclerBean> updateItems(List<RecyclerBean> books, boolean animated) {
            List<RecyclerBean> list = new ArrayList<>();
            animateItems = animated;
            lastAnimatedPosition = -1;
            list.addAll(books);
            notifyDataSetChanged();
            return list;
        }
    
    
        @Override
        public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                             int viewType) {
            View v = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.recyclerview_item, parent, false);
            ViewHolder vh = new ViewHolder(v);
            return vh;
        }
    
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            runEnterAnimation(holder.itemView, position);
            RecyclerBean recyclerBean = list.get(position);
            holder.ivBook.setBackgroundResource(recyclerBean.getImg());
        }
    
        @Override
        public int getItemCount() {
            return list.size();
        }
    
    
        public RecyclerBean getBook(int pos) {
            return list.get(pos);
        }
    
    
        public RecyclerItemClickListener.OnItemClickListener onItemClickListener = new RecyclerItemClickListener.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                RecyclerBean book = getBook(position);
                Intent intent = new Intent(context, RecyclerDetailActivity.class);
                intent.putExtra("book", book);
    
                ActivityOptionsCompat options =
                        ActivityOptionsCompat.makeSceneTransitionAnimation(context,
                                view.findViewById(R.id.ivBook),context.getString(R.string.transition_book_img));
                ActivityCompat.startActivity(context, intent, options.toBundle());
    
            }
        };
    }

    RecyclerVpAdapter.class的代码:

    public class RecyclerVpAdapter extends FragmentPagerAdapter {
    
       ArrayList<Fragment> list;
       FragmentManager fm;
    
       public RecyclerVpAdapter(FragmentManager fm, ArrayList<Fragment> list) {
          super(fm);
          this.list = list;
          this.fm = fm;
    
       }
    
       @Override
       public int getCount() {
          return list.size();
       }
    
       @Override
       public Fragment getItem(int arg0) {
          return list.get(arg0);
       }
    
    }

    RecyclerFragment.class中代码:

    RecyclerView mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
            mRecyclerView.setHasFixedSize(true);
            //ListView形式的列表
    //        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
            //GirdView形式的列表
            GridLayoutManager layoutManager = new GridLayoutManager(getContext(),2);
            mRecyclerView.setLayoutManager(layoutManager);
            RecyclerViewHeader header = (RecyclerViewHeader) view.findViewById(R.id.header);
            AutoScrollViewPager viewPager = (AutoScrollViewPager) header.findViewById(R.id.vp_books);
            ArrayList<Fragment> fragmentList = new ArrayList<>();
            for (int i = 0; i < vpImgPath.length; i++) {
                RecyclerVpFragment recyclerVpFragment = RecyclerVpFragment.newInstance(vpImgPath[i]);
                fragmentList.add(recyclerVpFragment);
            }
            RecyclerVpAdapter bAdapter = new RecyclerVpAdapter(getChildFragmentManager(),fragmentList);
            viewPager.setAdapter(bAdapter);
            viewPager.setCurrentItem(0);
            viewPager.startAutoScroll();
            //开启Viewpager的自动轮播
            header.attachTo(mRecyclerView,true);
            for (int i = 0; i < title.length; i++) {
                RecyclerBean recyclerBean = new RecyclerBean();
                recyclerBean.setImg(imgPath[i]);
                recyclerBean.setInfo(tvInfo[i]);
                recyclerBean.setTitle(title[i]);
                recyclerBean.setCatalog(title[i]);
                recyclerBean.setAuthor_intro(title[i]);
                recyclerBean.setSummary(title[i]);
                recyclerBean.setImglarge(imgPath[i]);
                mList.add(recyclerBean);
            }
            mAdapter = new RecyclerAdapter(getActivity(),mList);
            //RecyclerView子项的点击事件
            mRecyclerView.addOnItemTouchListener(new RecyclerItemClickListener(getActivity(), mAdapter.onItemClickListener));
            mRecyclerView.setAdapter(mAdapter);

    上面RecyclerView的item布局里面,父布局是一个CardView;
    CardView继承FrameLayout,是能在自身之上添加了圆角和阴影效果的一种布局,常常用在RecyclerView、ListView、GirdView的item布局里面;
    比较常用的有这几个属性:

    <!--圆角半径-->
     app:cardCornerRadius="4dp"
     <!--阴影面积-->
     app:cardElevation="10dp"
    <!--点击水波动画-->
     android:foreground="?android:attr/selectableItemBackground"

    4、CoordinatorLayout、CollapsingToolbarLayout、TabLayout

    (GIF太大,压缩大小之后,有点儿问题)

    CoordinatorLayout,一个从另一层面去控制子view之间触摸事件的布局,在CoordinatorLayout的布局中使用了Toolbar ,允许你更加自由的自定义其外观与布局的其余部分融为一体。使用AppBarLayout可以让你的Toolbar与其他View(比如TabLayout的选项卡)能响应被标记了ScrollingViewBehavior的View的滚动事件。
    CollapsingToolbarLayout,可伸缩折叠的Toolbar ,直接添加Toolbar到AppBarLayout可以让你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll标志,但是无法控制不同元素如何响应collapsing的细节。这里使用了 CollapsingToolbarLayout的app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部当你让CollapsingToolbarLayout和Toolbar在一起使用的时候,title 会在展开的时候自动变得大些,而在折叠的时候让字体过渡到默认值。
    TabLayout 既实现了固定的选项卡(View的宽度平均分配),也实现了可滚动的选项卡(View宽度不固定同时可以横向滚动)。如果你使用ViewPager在 tab之间横向切换,你可以直接从PagerAdapter的getPageTitle() 中创建选项卡,然后使用setupWithViewPager()将两者联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager
    的页面改变能更新tab的选中状态。
    注:图中Activity的启动效果动画是通过下面代码实现的:

           ActivityOptionsCompat options =
           ActivityOptionsCompat.makeSceneTransitionAnimation(context,
           view.findViewById(R.id.ivBook),context.getString(R.string.transition_book_img));
           ActivityCompat.startActivity(context, intent, options.toBundle());

    使用之前先添加Design的包,即可使用这三个;
    activity_appbar_detail.xml主布局代码:

    <?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.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android: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">
    
    
                <ImageView
                    android:id="@+id/ivImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:transitionName="@string/transition_book_img"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />
    
                <android.support.v7.widget.Toolbar
                    android: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>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <android.support.design.widget.TabLayout
                android:id="@+id/sliding_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed"
                style="@style/MyCustomTabLayout"
                />
    
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

    RecyclerDetailActivity.class代码:

    public class RecyclerDetailActivity extends AppCompatActivity {
    
    
        private ViewPager mViewPager;
        private RecyclerBean mBook;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_appbar_detail);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    onBackPressed();
                }
            });
    
            mBook = (RecyclerBean) getIntent().getSerializableExtra("book");
            CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
            collapsingToolbar.setTitle(mBook.getTitle());
    
            ImageView ivImage = (ImageView) findViewById(R.id.ivImage);
            ivImage.setBackgroundResource(mBook.getImglarge());
            mViewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(mViewPager);
    
            TabLayout 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(mBook.getSummary()), "测试");
            adapter.addFragment(DetailFragment.newInstance(mBook.getAuthor_intro()), "测试");
            adapter.addFragment(DetailFragment.newInstance(mBook.getCatalog()), "测试");
            mViewPager.setAdapter(adapter);
        }
    
    
        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);
            }
    
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }
    
            @Override
            public int getCount() {
                return mFragments.size();
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitles.get(position);
            }
        }
    
    }

    5、TextInputLayout

    这里写图片描述
    TextInputLayout 控件表现得就像LinearLayout 一样,它是一个容器。TextInputLayout 中只能放一个子元素,和ScrollView有点类似,并且子元素必须是EditText;
    TextInputLayout 实现的功能就是当EditText中输入第一个字母要隐藏hint的时候,TextInputLayout中会出现一个悬浮的标签来显示这个hint,还负责一个炫酷的的material 动画
    布局代码:

    <?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="match_parent"
        android:orientation="vertical">
    
        <include layout="@layout/include_toolbar" />
    
        <android.support.design.widget.TextInputLayout
            android:id="@+id/textInputEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp">
    
            <EditText
                android:id="@+id/edit_text_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_username"
                android:inputType="textEmailAddress" />
        </android.support.design.widget.TextInputLayout>
    
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <EditText
                android:id="@+id/edit_text_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_password"
                android:inputType="textEmailAddress" />
        </android.support.design.widget.TextInputLayout>
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/button_login" />
    
    </LinearLayout>

    6、FloatingActionButton、Snackbar

    这里写图片描述
    布局代码:

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordinatorLayout"
        tools:context="com.aswifter.material.BlankFragment">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            >
    
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/flb_black"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:layout_marginRight="20dp"
                android:src="@drawable/ic_favorite"
                android:layout_alignParentBottom="true"
                app:fabSize="mini"
                app:layout_anchor="@id/coordinatorLayout"
                app:layout_anchorGravity="bottom|right|end"
                app:borderWidth = "0dp"
                />
        </LinearLayout>
    
    </android.support.design.widget.CoordinatorLayout>

    Fragment中的代码:

    public class BlankFragment extends Fragment {
    
        private View view;
    
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            view = inflater.inflate(R.layout.fragment_blank, container, false);
            final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) view.findViewById(R.id.coordinatorLayout);
            FloatingActionButton floatingActionButton = (FloatingActionButton) view.findViewById(R.id.flb_black);
            floatingActionButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Snackbar.make(coordinatorLayout,
                            "Snackbar", Snackbar.LENGTH_LONG)
                            .setAction("OK", new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    Toast.makeText(
                                            getActivity(),
                                            "snackbar OK clicked",
                                            Toast.LENGTH_LONG).show();
                                }
                            })
                            .show();
                }
            });
    
            return view;
        }
    
    }
    展开全文
  • Material

    2014-07-24 12:27:24
    unity3d学习(一) sshong 发表于2013年2月3日 11:39:01 更新于2013年2月6日 23:44:15 原文 ...以下均为开发2d游戏相关。...1、如果用unity开发2d游戏,需要将主摄像头设置为orthgrahphic正交模式,同时可以设置...
    unity3d学习(一)
    sshong 发表于2013年2月3日 11:39:01 更新于2013年2月6日 23:44:15
    原文

    以下均为开发2d游戏相关。

    1、如果用unity开发2d游戏,需要将主摄像头设置为orthgrahphic正交模式,同时可以设置orthgrahphicSize为视图高度的一半,这样1像素单位等同于unity里的1单位。
    Camera.main.orthographicSize = Screen.height / 2;
    unity projection

    2、unity采用左手坐标系,如果开发2d游戏,主摄像头都是从z小的方向向z大的方向,所以看到的x y如图方向
    unity坐标系

    3、如上,如果熟悉开发flash的人,就知道这个坐标系与flash的坐标系Y向是反的。

    4、自己写一个矩形(两个三角形)贴图(此图尺寸768*325),以此展示unity的mesh相关。

    一个gameobject需要增加meshFilter和meshRender两个component。

    meshFilter中设置mesh属性,而mesh需要设置顶点坐标,uv,三角形顶点序号(顺时针)

    所谓uv,是指一坨三角形顶点,对应到一张平面图中,每个顶点在这张平面图中的位置(0到1之间,代表百分比)

    material需要设置shader和texture材质。
    public override void Start()         {             base.Start();             //             Vector3[] vertices = { new Vector3(768,325,0), new Vector3(768,0,0), new Vector3(0,0,0), new Vector3(0,325,0) };             Vector2[] uvs = { new Vector2(1, 1), new Vector2(1, 0), new Vector2(0, 0), new Vector2(0, 1) };             int[] triangles = {0,1,2,2,3,0};             //             MeshFilter meshfilter = gameObject.AddComponent<MeshFilter>();             Mesh mesh = new Mesh();             mesh.vertices = vertices;             mesh.uv = uvs;             mesh.triangles = triangles;             //             meshfilter.mesh = mesh;             //             Shader shader = Shader.Find("Sprite/Vertex Colored, Fast");             Material mat = new Material(shader);             mat.mainTexture = Resources.Load("map") as Texture;             //             MeshRenderer render = gameObject.AddComponent(typeof(MeshRenderer)) as MeshRenderer;             render.material = mat;         }
    标签:unity3d分类:Unity3d阅读:308
    展开全文
  • IDEA插件之颜值篇Material Theme UI

    万次阅读 多人点赞 2020-03-30 23:22:27
    今天推荐一个IDEA颜值类插件:Material Theme UI 大致效果 安装方式 IDEA插件官网地址:https://plugins.jetbrains.com/plugin/8006-material-theme-ui GITHUB地址:https://github.com/C...

    俗话说,工欲善其事必先利其器。

    工具的颜值也很重要,好的主题让人赏心悦目,有码代码的欲望。

    今天推荐一个IDEA颜值类插件:Material Theme UI

    大致效果

    laptop-full.png (2388Ã1320)

    screenshot_17526.png (2880Ã1759)

    安装方式

    IDEA插件官网地址:https://plugins.jetbrains.com/plugin/8006-material-theme-ui

    GITHUB地址:https://github.com/ChrisRM/material-theme-jetbrains

     

    我认为最便捷的安装方式应该是从IDEA设置--->插件选项中在线搜索:

    最新版本的截图如下,前面的版本可能需要选择"browser repositories"按钮进行搜索。

    安装后 重启IDEA,重启后设置自己喜欢的首选主题。

     

    这里我选择第一项,Oceanic

    然后选择对比模式

     

    然后选择增强的颜色默认是红色,我设置的是800080(紫色)。

    然后就是一些杂项,可以默认即可,然后完成后就可以体验了。

     

    后面还可以进行调整

     

     

    可以在这里调整字体、大小、行间距等:

     

    超赞插件推荐:https://blog.csdn.net/w605283073/article/details/103266294

    超实用IDEA 插件推荐:https://blog.csdn.net/w605283073/article/details/89163627

    如果觉得本文对你有帮助,欢迎点赞评论,欢迎关注我,我将努力创作更多更好的文章。

     

    展开全文
  • MaterialApp 详解

    千次阅读 2019-09-17 12:52:25
    一、参数含义 MaterialApp({ Key key, // 设备用于为用户识别应用程序的单行描述 this.title = '', // 应用程序默认路由的小部件,用来定义当前应用打开的时候,所显示的界面 this.home, // 在操作系统界面中...

    一、主要参数含义

    title : 在任务管理窗口中所显示的应用名字
    theme : 应用各种 UI 所使用的主题颜色
    color : 应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色
    home : 应用默认所显示的界面 Widget
    routes : 应用的顶级导航表格,这个是多页面应用用来控制页面跳转的,类似于网页的网址
    initialRoute :第一个显示的路由名字,默认值为 Window.defaultRouteName
    onGenerateRoute : 生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面
    onLocaleChanged : 当系统修改语言的时候,会触发å这个回调
    navigatorObservers : 应用 Navigator 的监听器
    debugShowMaterialGrid : 是否显示 Material design 基础布局网格,用来调试 UI 的工具
    showPerformanceOverlay : 显示性能标签
    checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关
    

    二、基本示例:

    1、title、color 示例
    在任务管理器,就会显示该标题、颜色

    2、home 、initialRoute、onGenerateRoute 示例

    注意:
    MaterialApp的构造方法中的每一个参数都是可以省略的,但是官方还是要求[home] ,[routes][onGenerateRoute]这三个参数至少要填写一个

    home 示例

    import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialAppDemo());
    
    // 第一个类
    class FirstScreen extends StatelessWidget {
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("First Bar")),
            body: Center(child: Text("First Body"))
        );
      }
    }
    
    // 第二个类
    class SecondScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("Second Bar")),
            body: Center(child: Text("Second Body"))
        );
      }
    }
    
    // 最后一个类
    class MaterialAppDemo extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: '应用名称',
          color: Colors.green,
          home: SecondScreen(),
          theme: ThemeData(
              primaryColor: Colors.redAccent
          )
        );
      }
    }
    

    在这里插入图片描述
    initialRoute、onGenerateRoute 示例
    将上面最后一个(主类)代码改为如下

    class MaterialAppDemo extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: '应用名称',
          theme: ThemeData(
              primaryColor: Colors.redAccent
          ),
          // 该 initialRoute 默认值为 /,若不指定该值,则须在routes中的某个 key 替换为 '/'
          // 例如  'second': (BuildContext context) => SecondScreen() 改为  '/': (BuildContext context) => SecondScreen()
          initialRoute: 'second',
          routes: <String, WidgetBuilder>{
            "third": (BuildContext context) => ThirdScreen(),
            'first': (BuildContext context) => FirstScreen(),
            'second': (BuildContext context) => SecondScreen()
          },
        );
      }
    }
    

    在这里插入图片描述
    3、debugShowMaterialGrid 示例
    将上面最后一个(主类)代码中添加如下一行语句

    debugShowMaterialGrid: true
    

    在这里插入图片描述
    4、showPerformanceOverlay 示例
    将上面最后一个(主类)代码中添加如下一行语句

    showPerformanceOverlay: true
    

    在这里插入图片描述

    展开全文
  • 学习笔记Android弹框material-dialogs

    万次阅读 2019-03-29 17:07:13
    今天来归纳一下安卓第三方弹框material-dialogs的简单用法
  • Android Material组件使用详解

    千次阅读 2020-09-01 10:38:12
    前言 我们在平时写布局时,当遇到按钮需要圆角、或者描边等,通常的方法是新建一个xml文件,在shape标签下写,然后通过setBackground(drawable)设置。这本来没什么问题,但是射击师会喜欢看起来和别人不一样的效果,...
  • 利用Prism 搭建的一个WPF MVVM框架,导入了Material Design UI库,在实现TreeView时费了点周折,记录于此。 Xaml的写法如下: 需要应用命名空间: xmlns:domain="clr-namespace:management.wpfUI.Models" xmlns...
  • Material icons 全图标一览

    万次阅读 2018-12-17 16:55:31
    只因网站太难打开,所以在这放预览图给各位客官解解馋 icon地址:https://material.io/tools/icons/?icon=sd_storage&amp;style=baseline  
  • IDEA Material Theme UI 暗黑系主题的安装

    万次阅读 2018-09-09 11:37:26
    直接在idea里面搜索Material Theme UI 不知怎么的死活安装不上。 然后就百度了一番,去到jetbrains 官网下载了这个主题 主题在IDEA官网的地址 下载下来是个压缩包: 解压:然后将其复制到IDEA的安装目录里面的...
  • sharedMaterial是公用的Material,所有用到这个材质的MeshRendered都会引用这个Material。改变sharedMaterial的属性也会改变mat文件。 material是独立的Material,改变material的属性不会影响到其他对象,也不会影响...
  • AndroidStudio使用Material Theme UI

    万次阅读 2017-09-27 15:43:11
     Android Studio俨然成为现在开发安卓的主要利器,谷歌的Material Design风格我很喜欢,Android Studio也有这个类似的主题,即Material Theme UI. AS应用后效果截图 还算可以吧,这图标什么比默认的还是...
  • 首先我们需要插件,如图找到file–New–最后一项Material design icons,打开在这里我们可以找我们经常需要的一些图标,可以自定义大小,颜色,以及生成各个分辨率大小的图标,相当的方便,那么这些图标都有哪些呢?...
  • Unity中动态改变物体的Material(Shader)

    万次阅读 2017-05-27 22:12:39
    在Unity中,我们在进行物体控制和交互过程中经常会涉及到动态改变Shader的情况,如将一个三维物体用网格显示、将三维物体的表现形式进行变更等等。 在Unity中主要通过MeshRenderer组件进行控制,我们可以通过获取...
  • This chapter covers various material related functionalities that are available in standard SAP. These include material substitution, item proposals, automatic product selection, material listing a
  • Web Material-UI 详解 环境搭建与Helloword,今天介绍一款实现Material Design的开源项目Material-UI,它是一组用来实现Google的Material Design设计规范的React组件,它是一个前端js框架,主要用在web领域,今天...
  • Android 关于使用 google material 支持库

    千次阅读 2019-08-06 23:51:32
    1.在gradle.properties文件添加 android.useAndroidX=true android.enableJetifier=true 2.build.gradle文件中添加,注意Android支持库依赖的是 androidx包,否则会报错 dependencies { implementation file...
  • ANDROID L——Material Design详解(主题和布局)

    万次阅读 多人点赞 2014-10-28 00:54:00
    Android L特性介绍——Material Design。详解Material Design中主题的使用和布局的简介
  • unity 代码动态加载材质求 (Material)

    万次阅读 2018-02-10 23:02:56
    首先新建一个shader,在progect面板中右键Create-&gt;Shader-&gt;Standard Surface Shader.右键刚才新建的shader,选择Create...接下来就可以在程序中加载这个Material了,2种方式:1.Material mat = Resource...
  • 新的Material主题提供了: 系统Widgets可设置它们的调色板 系统Widgets的触摸反馈动画 Activity的过渡动画 您可以自定义Material主题,根据你的品牌标识,用一个调色板来控制。 可以使用主题属性来为操作栏
  • material与sharedMaterial的区别

    万次阅读 2015-03-23 10:31:04
    如果你需要修改模型材质的颜色,或者是修改材质Shader的一些属性, 通常情况是用获取模型的Renderer组件,然后获取它的material属性。 举个简单的例子,修改颜色或者直接更换shader material.color = Color.red; ...
1 2 3 4 5 ... 20
收藏数 109,071
精华内容 43,628
关键字:

material