智能管家App kotlin版(1)——框架搭建

前言:学习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逻辑实现！！！

框架搭建完成，下篇文章将针对工具类封装与首页引导页进行开发，欢迎关注后续更新！！！

源码下载链接