app:showAsAction=“always” />
<item
android:id=“@+id/delete”
android:icon=“@drawable/ic_delete”
android:title=“Delete”
app:showAsAction=“ifRoom” />
<item
android:id=“@+id/setting”
android:title=“Setting”
app:showAsAction=“never”
android:icon=“@drawable/ic_settings” />
- 然后在Activity中重写如下函数
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu); //加载菜单文件
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, “你点击了备份”, Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, “你点击了删除”, Toast.LENGTH_SHORT).show();
break;
case R.id.setting:
Toast.makeText(this, “你点击了设置”, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return true;
}
2. 滑动菜单(QQ5.0那种)
=================
首先介绍以下DrawerLayout的用法吧.首先它是一个布局,在布局中允许放入两个直接子控件,第一个子控件是主屏幕中显示的内容,第二个子控件是滑动菜单中显示的内容.
DrawerLayout
- 布局写法示例
<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/drawer_layout”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>
<FrameLayout
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” />
<TextView
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:text=“This is Menu”
android:id=“@+id/tv_menu”
android:textSize=“30sp”
android:background=“#FFF”
android:layout_gravity=“start”/>
</android.support.v4.widget.DrawerLayout>
- 然后在Activity中写入如下:
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar(); //具体实现是Toobar来完成的
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true); //让导航按钮显示出来
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu); //设置导航按钮图标
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu); //加载菜单文件
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
//这个是HomeAsUp按钮的id永远都是android.R.id.home
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START); //将滑动菜单显示出来
break;
case R.id.backup:
Toast.makeText(this, “你点击了备份”, Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, “你点击了删除”, Toast.LENGTH_SHORT).show();
break;
case R.id.setting:
Toast.makeText(this, “你点击了设置”, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return true;
}
}
NavigationView
你可以在滑动菜单页面定制任意的布局,不过谷歌给我提供了一种更好的方法—-使用NavigationView.NavigationView是Design Support库中提供的一个控件.
效果如下:
使用方法
- 引入
compile ‘com.android.support:design:24.2.1’
compile ‘de.hdodenhof:circleimageview:2.1.0’
第一个是Design Support->NavigationView
第二个是图片圆形化的一个开源库
- 在开始使用NavigationView之前,我们还需要准备好两个东西,menu和headerLayout.menu是用来在NavigationView中显示具体的菜单项的,headerLayout则是用来在NavigationView中显示头部布局的.
新建menu文件夹->new->Menu resource file
menu
<?xml version="1.0" encoding="utf-8"?><item
android:id=“@+id/nav_call”
android:icon=“@drawable/nav_call”
android:title=“Call” />
<item
android:id=“@+id/nav_friends”
android:icon=“@drawable/nav_friends”
android:title=“Friends” />
<item
android:id=“@+id/nav_location”
android:icon=“@drawable/nav_location”
android:title=“Location” />
<item
android:id=“@+id/nav_mail”
android:icon=“@drawable/nav_mail”
android:title=“Mail” />
<item
android:id=“@+id/nav_task”
android:icon=“@drawable/nav_task”
android:title=“Tasks” />
layout文件夹->new->layout resource file
headerLayout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“180dp”
android:background=“@color/colorPrimary”
android:padding=“10dp”>
<de.hdodenhof.circleimageview.CircleImageView
android:id=“@+id/icon_image”
android:layout_width=“70dp”
android:layout_height=“70dp”
android:layout_centerInParent=“true”
android:src=“@drawable/nav_icon” />
<TextView
android:id=“@+id/tv_mail”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_alignParentBottom=“true”
android:textColor=“#FFF”
android:textSize=“14sp”
android:text=“xfhy@gmail.com”/>
<TextView
android:id=“@+id/tv_username”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_above=“@id/tv_mail”
android:textSize=“14sp”
android:textColor=“#FFF”
android:text=“Tony Gonm”/>
高度设为180dp,这是一个NavigationView比较适合的高度.
3.然后将布局中滑动菜单布局替换一下,具体实现:
<?xml version="1.0" encoding="utf-8"?><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/drawer_layout”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>
<FrameLayout
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.design.widget.NavigationView
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:id=“@+id/nav_view”
android:layout_gravity=“start”
app:menu=“@menu/nav_menu”
app:headerLayout=“@layout/nav_header”/>
</android.support.v4.widget.DrawerLayout>
4.在Activity中找到NavigationView控件
navView.setCheckedItem(R.id.nav_call); //设置默认选中call选项
//设置NavigationView菜单选中事件的监听器
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//这里可以根据item的getItemId()来判断 具体点击了哪个选项
mDrawerLayout.closeDrawers(); //关闭滑动菜单
return true;
}
});
3. 悬浮按钮和可交互提示
==============
3.1 FloatingActionButton
FloatingActionButton是Design Support 库中提供的一个控件,这个控件可以帮助我们轻松地实现悬浮按钮的效果.
1.首先,在上面的基础上进行修改activity_main.xml布局.将下面这段代码放到FrameLayout中.
<android.support.design.widget.FloatingActionButton
android:id=“@+id/fab_done”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_gravity=“bottom|end”
android:layout_margin=“16dp”
android:src=“@drawable/ic_done” />
2.设置点击事件,和普通按钮一样的用法.
FloatingActionButton fab_done = (FloatingActionButton) findViewById(R.id.fab_done);
//设置点击事件 和普通按钮的点击事件是一样的
fab_done.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, “你点我了(Done)”, Toast.LENGTH_SHORT).show();
}
});
3.2 Snackbar
Design Support库中提供的更加先进的提示工具—-Snackbar
首先要明确,Snackbar并不是Toast的替代品,它们两者之间有着不同的应用场景.
Snackbar允许在提示当中加入一个可交互按钮,当用户点击按钮的时候可以执行一些额外的逻辑操作.
过一段时间会自动消失
效果如下:
用法如下:
//需要传入View对象 这个view只要是当前界面布局的任意一个View都可以,Snackbar会根据这个View来
//自动查找最外层的布局,用来展示Snackbar.
Snackbar.make(view,“Data Deleted”,Snackbar.LENGTH_SHORT)
.setAction(“Undo”,new View.OnClickListener(){
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, “Data restored”, Toast.LENGTH_SHORT).show();
}
})
.show();
存在的问题:这个Snackbar竟然将我们的悬浮按钮给遮挡住了.
3.3 CoordinatorLayout
上面遗留的问题用CoordinatorLayout就可以轻松解决.CoordinatorLayout可以说是一个加强版的FrameLayout,这个布局也是由Design Support库提供的.
事实上,CoordinatorLayout可以监听其所有子控件的各种事件,然后自动帮助我们做出最合理的响应.
如下:
用法
直接替换用android.support.design.widget.CoordinatorLayout
替换掉上面的FrameLayout
4 卡片式布局
=======
4.1 CardView
CardView是用于实现卡片式布局效果的重要控件,由appcompat-v7库提供.实际上,CardView就是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体的效果. 下面就将使用CardView作为Recycler的子项来使用,达到下面图片上的效果.
效果如下:
1.首先需要往app/build.gradle文件中声明这些库的依赖才行
compile 'com.android.support:cardview-v7:24.2.1' //CardView
compile 'com.android.support:recyclerview-v7:24.2.1' //RecyclerView
compile 'com.github.bumptech.glide:glide:3.7.0' //强大的图片加载库
2.然后每个RecyclerView的子项就是用CardView来实现的.具体代码:
<?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:layout_margin=“5dp”
app:cardCornerRadius=“4dp”>
<LinearLayout
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:orientation=“vertical”>
<ImageView
android:id=“@+id/fruit_image”
android:layout_width=“match_parent”
android:layout_height=“100dp”
android:scaleType=“centerCrop” />
<TextView
android:id=“@+id/fruit_name”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_gravity=“center_horizontal”
android:layout_margin=“5dp”
android:textSize=“16sp” />
</android.support.v7.widget.CardView>
3.然后直接将RecyclerView显示出来即可 就可以看到CardView的效果了.
上面的那种2列的效果是配合
GridLayoutManager layoutManager = new GridLayoutManager(this,2); //2列 recyclerView.setLayoutManager(layoutManager);
这个使用的.
待解决问题:RecyclerView把Toolbar遮盖住了.
4.2 AppBarLayout
AppBarLayout是Design Support提供的另一个工具,AppBarLayout实际上是一个垂直方向的LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些Material Design的设计理念.
AppBarLayout必须是CoordinatorLayout的子布局
可以实现的效果:当往下滑的时候标题栏自动隐藏,往上滑的时候标题栏用重新出现.
- 首先将Toolbar用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:layout_scrollFlags=“scroll|enterAlways|snap”
app:popupTheme=“@style/ThemeOverlay.AppCompat.Light” />
</android.support.design.widget.AppBarLayout>
- 然后将布局中的RecyclerView加一个属性,这个属性可以指定布局的行为.
app:layout_behavior=“@string/appbar_scrolling_view_behavior”
- 现在往Toolbar中添加一个
app:layout_scrollFlags="scroll|enterAlways|snap"
属性,并将这个属性的值指定成了scroll|enterAlways|snap.其中,scroll表示当RecyclerView向上滚动的时候,Toolbar会跟着一起向上滚动并实现隐藏;enterAlways 表示当RecyclerView向下滚动的时候Toolbar会跟着一起向下滚动并重新显示.snap表示当Toolbar还没有完全隐藏或显示的时候,会根据当前滚动的距离,自动选择是隐藏还是显示.
4.3 下拉刷新
SwipeRefreshLayout就是用于实现下拉刷新功能的核心类,它是由support-v4库提供的.我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中,就可以迅速让这个控件支持下拉刷新.
效果如下:
使用方法
- 在布局中这样用
<android.support.v4.widget.SwipeRefreshLayout
android:id=“@+id/swipe_refresh”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layout_behavior=“@string/appbar_scrolling_view_behavior”>
<android.support.v7.widget.RecyclerView
android:id=“@+id/recycler_view”
android:layout_width=“match_parent”
android:layout_height=“match_parent” />
</android.support.v4.widget.SwipeRefreshLayout>
- 在Activity中,可以设置监听器等
private SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary); //设置下拉刷新进度条的颜色
//设置下拉刷新的监听器
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
refreshFruits(); //进行刷新操作
}
});
5. 可折叠式标题栏
===========
5.1 CollapsingToolbarLayout
实现一个可折叠式标题栏的效果,需要借助CollapsingToolbarLayout这个工具.
效果如下:
页面上有三部分,水果标题栏,水果内容详情和悬浮按钮
- 在布局中这样写:
<android.support.design.widget.CoordinatorLayout 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”
android:id=“@+id/activity_fruit”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
tools:context=“com.xfhy.materialtest.FruitActivity”>
<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:layout_height=“match_parent”
android:theme=“@style/ThemeOverlay.AppCompat.Dark.ActionBar”
app:contentScrim=“?attr/colorPrimary”
app:layout_scrollFlags=“scroll|exitUntilCollapsed”>
<ImageView
android:id=“@+id/fruit_image_view”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:scaleType=“centerCrop”
app:layout_collapseMode=“parallax” />
<android.support.v7.widget.Toolbar
android:id=“@+id/toolbar”
android:layout_width=“match_parent”
android:layout_height=“?attr/actionBarSize”
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
roid:scaleType=“centerCrop” : 图片的缩放模式 这种模式是表示图片等比例放大,占满这个控件
app:layout_collapseMode=“parallax” : 用于指定当前控件在CollapsingToolbarLayout折叠过程中
的折叠模式,其中Toolbar指定成pin,表示在折叠的过程中位置始终保持不变,ImageView指定成parallax,
表示会在折叠过程中产生一定的错位偏移,这种模式的视觉效果会非常好.
这个ImageView是用于显示顶部的图片的
–>
<ImageView
android:id=“@+id/fruit_image_view”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:scaleType=“centerCrop”
app:layout_collapseMode=“parallax” />
<android.support.v7.widget.Toolbar
android:id=“@+id/toolbar”
android:layout_width=“match_parent”
android:layout_height=“?attr/actionBarSize”
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-lGw1YXpM-1715684500522)]
[外链图片转存中…(img-hrvbYEMJ-1715684500523)]
[外链图片转存中…(img-A2zkJGky-1715684500523)]
[外链图片转存中…(img-TwOU94sR-1715684500524)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!