前言:学习kotlin一段时间了,最近想用kotlin开发一个智能管家App,以系列博客,记录App开发过程。希望对阅读者有所帮助,期待大家的评论和关注!!!
此篇文章紧做关于该项目的框架搭建,后续功能实现请关注后续文章!!!
此篇文章完成后效果展示:
一.项目架构部署
1.创建一个Android项目,我们把它命名为SmartButler,选用Kotlin编程。
2.创建成功之后,首先 在com.zrc.smartbutler目录下面建几个Package:
包名 | 作用 |
---|---|
adapter | 放适配器 |
application | 放一个Application,做统一的初始化 |
fragment | 放置碎片 |
entity | 放一些实体类 |
sevice | 放一些服务类 |
ui | 放Activity以及一些UI布局 |
utils | 放一些工具类 |
view | 放在一些自定义控件 |
3.在application包下,创建一个类,名为BaseActivity,代码如下:
package com.zrc.smartbutler.application
import android.app.Application
/**
*项目名: SmartButler
*包名: com.zrc.smartbutler.application
*文件名: BaseApplication
*创建者: 张如成
*创建时间: 2020/5/5 20:53
*描述: Application
*/
class BaseApplication : Application(){
// 创建
override fun onCreate() {
super.onCreate()
}
}
上述代码没有什么好说的,只是简单的实现Application,对onCreate()进行了重写,方便后续进行统一管理。此处,我更想要告诉大家,要养成边写代码边写注释的好习惯!!!
4.:实现Activity的基类,在ui包下新建BaseActivity,代码如下:
package com.zrc.smartbutler.ui
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity
/**
*项目名: SmartButler
*包名: com.zrc.smartbutler.ui
*文件名: BaseActivty
*创建者: 张如成
*创建时间: 2020/5/5 20:56
*描述: Activity的基类
*/
open class BaseActivty : AppCompatActivity(){
/**
* 主要做的事情:
* 1.统一的属性
* 2.统一的接口
* 3.统一的方法
* */
//显示返回键
fun back(mBoolean: Boolean){
supportActionBar?.setDisplayHomeAsUpEnabled(mBoolean)
}
//点击返回键的效果
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when(item.itemId){
android.R.id.home -> finish()
}
return super.onOptionsItemSelected(item)
}
}
该类主要是继承AppCompatActivity(),设置ActivityBar返回键按钮以及点击返回键所触发的效果!!!
5.在src/main/res中多创建几个drawable包,放置不同像素图片,方便以后做图片适配
6.继续在该目录下,创建value-en和values-zh,方便以后做多语言适配
7.在utils包下创建UtilTooks和staticClass类,分别放置工具类和数据/常量
UtilTooks:
package com.zrc.smartbutler.utils
/**
*项目名: SmartButler
*包名: com.zrc.smartbutler.utils
*文件名: UtilTools
*创建者: 张如成
*创建时间: 2020/5/6 8:07
*描述: 工具统一类
*/
class UtilTools {
}
StaticClass:
package com.zrc.smartbutler.utils
/**
*项目名: SmartButler
*包名: com.zrc.smartbutler.utils
*文件名: StaticClass
*创建者: 张如成
*创建时间: 2020/5/6 8:08
*描述: 数据/常量
*/
class StaticClass {
}
目前没有代码,后续添加!!!
至此,项目架构部署完成!!!
二.首页框架—TabLayout布局搭建
1.使用TabLayout,首先要添加依赖
implementation "com.google.android.material:material:1.0.0"
implementation 'com.android.support:appcompat-v7:23.4.0'
2.然后搭建首页控件,编写activity_main.xml,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/mTabLayout"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
app:srcCompat="@drawable/icon_setting"/>
</RelativeLayout>
首页框架,采用 TabLayout + ViewPager 的形式构成,这点没什么好说的,大家看代码都可以看懂。主要想说一下,下面的FloatingActionButton
,这段代码亮点在最后一个属性app:srcCompat="@drawable/icon_setting"
,在这里,并没有采用传统的png格式的图片,而是引用VectorDrawable矢量图,感兴趣了解的,请看的另外一篇文章:
在Android Studio中生成矢量图VectorDrawable的三种方式以及静态VectorDrawable的使用
至此,TabLayout布局搭建完成!!!
三.首页框架—TabLayout逻辑实现.
前往MainActivity写代码,代码如下:
package com.zrc.smartbutler
import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentPagerAdapter
import androidx.viewpager.widget.ViewPager.OnPageChangeListener
import com.zrc.smartbutler.fragment.ButlerFragment
import com.zrc.smartbutler.fragment.GirlFragment
import com.zrc.smartbutler.fragment.UserFragment
import com.zrc.smartbutler.fragment.WechatFragment
import com.zrc.smartbutler.ui.SettingActivity
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity(),View.OnClickListener {
//Title
private val mTitle = listOf<String>("服务管家","微信精选","美女社区","个人中心")
//Fragment
private val mFragment = listOf<Fragment>(ButlerFragment(),WechatFragment(),GirlFragment(),UserFragment())
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//去掉阴影
supportActionBar?.elevation = 0F
//初始化数据
initData()
//初始化View
initView()
}
//初始化数据
private fun initData() {
}
//初始化View
private fun initView() {
fab_setting.setOnClickListener(this)
//默认隐藏
fab_setting.visibility = View.GONE
//预加载
mViewPager.offscreenPageLimit = mFragment.size
//mViewPager的滑动监听
mViewPager.addOnPageChangeListener(object : OnPageChangeListener {
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
}
override fun onPageSelected(position: Int) {
Log.i("TAG", "position:$position")
if (position == 0) {
fab_setting.visibility = View.GONE
} else {
//fab_setting.visibility = View.VISIBLE
fab_setting.visibility = View.VISIBLE
}
}
override fun onPageScrollStateChanged(state: Int) {}
})
//设置适配器
mViewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {
//选中的item
override fun getItem(position: Int): Fragment {
return mFragment[position]
}
//返回item的个数
override fun getCount(): Int {
return mFragment.size
}
//设置标题
override fun getPageTitle(position: Int): CharSequence? {
return mTitle[position]
}
}
//绑定
mTabLayout.setupWithViewPager(mViewPager)
}
override fun onClick(v: View?) {
when(v?.id){
R.id.fab_setting -> {
startActivity(Intent(this, SettingActivity::class.java))
}
}
}
}
1.先去除ActivityBar的阴影
2.初始化数据,在Fragment包下创建四个碎片。
由于现在只是框架,碎片里面都一样,且没啥东西,随机挑一个展示,剩下都雷同,内容后续添加!!!
UserFragment:
package com.zrc.smartbutler.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.zrc.smartbutler.R
/**
*项目名: SmartButler
*包名: com.zrc.smartbutler.fragment
*文件名: UserFragment
*创建者: 张如成
*创建时间: 2020/5/6 9:14
*描述: 个人中心
*/
class UserFragment:Fragment(){
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val view: View = inflater.inflate(R.layout.fragment_user,null)
return view
}
}
fragment_user:
<?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:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="个人中心"/>
</LinearLayout>
3.初始化View,对刚刚初始化的数据和ViewPager进行绑定,设置事件,到达能实现滑动和设置标题的效果。
4.针对悬浮小图标,进行ViewPager滑动监听,如果滑动到第一个Activity,则小图标不显示。
5.对小图标进行点击事情,点击之后,跳入SettingActivity
6.在ui包下,.新建SettingActivity,使其继承BaseActivty().
SettingActivity:
package com.zrc.smartbutler.ui
import android.os.Bundle
import com.zrc.smartbutler.R
class SettingActivity : BaseActivty() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_setting)
//显示返回键
back(true)
}
}
activity_setting:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:gravity="center"
android:orientation="vertical"
tools:context=".ui.SettingActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="@string/activity_setting"/>
</LinearLayout>
至此,TabLayout逻辑实现!!!
框架搭建完成,下篇文章将针对工具类封装与首页引导页进行开发,欢迎关注后续更新!!!