Android:2分钟创建一个好看的关于页面

写在前面

通常关于页面是我们开发的时候最容易忽视的页面,一般我都是留在最后才去设计关于页面,但是虽然关于页面并不起眼但是也不能忽视它的作用,所以我就在想能不能在很短时间内创建一个蛮好看的关于页面呢,我在Github找到了这个开源库,介绍里号称可以在两分钟内创建一个好看的关于页面。

用法

这个开源库的用法也很简单

首先在app/build.gradle文件中声明这个库的依赖:

1
2
3
dependencies {
compile 'com.github.medyo:android-about-page:1.2'
}

然后再修改关于(例如是MainActivity)页面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

View aboutPage = new AboutPage(this)
.isRTL(false)
.setImage(R.drawable.girl)//图片
.setDescription("道理我都懂,可我就是不听啊")//介绍
.addItem(new Element().setTitle("Version 1.0"))
.addGroup("与我联系")
.addEmail("[email protected]")//邮箱
.addWebsite("http://zhaoweihao.me")//网站
.addPlayStore("com.example.abouttest")//应用商店
.addGitHub("zhaoweihaoChina")//github
.create();

setContentView(aboutPage);
}
}

运行到模拟器

这样一个比较好看的关于页面就创建完毕了

这个开源库让我们建立关于页面的速度快了不是一点

更多

我们一般不会这样添加一个关于页面,因为现在要用到Toolbar而不是默认的Actionbar

先修改values/style 换成NoActionBar主题

1
2
3
4
5
6
7
8
<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
......
</style>

</resources>

所以我们先在app/res/layout里面新建一个about_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<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"
></android.support.v7.widget.Toolbar>

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

<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>


</RelativeLayout>

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

然后在包下创建AboutActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

package com.example.abouttest;

import android.os.Bundle;
......

/**
* Created by Administrator on 2017/5/2.
*/

public class AboutActivity extends AppCompatActivity{

private RelativeLayout relativeLayout;

private Toolbar toolbar;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.about_layout);

initViews();

View aboutPage = new AboutPage(this)
.isRTL(false)
.setImage(R.drawable.girl)//图片
.setDescription("道理我都懂,可我就是不听啊")//介绍
.addItem(new Element().setTitle("Version 1.0"))
.addGroup("与我联系")
.addEmail("[email protected]")//邮箱
.addWebsite("http://zhaoweihao.me")//网站
.addPlayStore("com.example.abouttest")//应用商店
.addGitHub("zhaoweihaoChina")//github
.create();

relativeLayout.addView(aboutPage);
}

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

}
return true;
}

private void initViews(){
relativeLayout= (RelativeLayout) findViewById(R.id.relativeLayout);
toolbar= (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);
}
}


}

最后别忘了在AndroidManifest.xml中声明AboutActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.abouttest">

<application
......
<activity android:name=".AboutActivity"
android:label="关于"
>
</activity>
</application>

</manifest>

运行到手机,查看

虽然效果看上去和上面没有区别,但是我们的aboutpage是在relativelayout里面的,ActionBar也改为Toolbar

添加自定义Element

以APP版本为例子 :

1
2
3
Element versionElement = new Element();
versionElement.setTitle("Version 6.2");
addItem(versionElement)

当前可用的Element类型

1
2
3
4
5
6
7
setTitle(String)	//设置element的标题
setIconTint(Int) //设置element的颜色
setIconDrawable(Int) //设置element的图标
setValue(String) //Set Element value like Facebook ID
setIntent(Intent) //Set intent to be called on onClickListener
setGravity(Gravity) //Set a Gravity for the element
setOnClickListener(View.OnClickListener) //如果Intent不是你想要的,可以在这里重写

写在最后

如果你阅读本文后受益匪浅,可以不妨请我喝杯咖啡[微信扫描下发二维码向我转账]

联系方式