AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

玩安卓从 0 到 1 之首页框架搭建

2022-12-31 343
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 玩安卓从 0 到 1 之首页框架搭建

前言

这篇文章是这个系列的第三篇文章了，前两篇文章分别是玩安卓从 0 到 1 之总体概览和玩安卓从 0 到 1 之项目首页。

一开始想的是一篇文章搞定，从项目的搭建到完成把所有的知识点写一遍，努力不做一篇水文；但后来开始写第一篇文章的时候，就感觉这不是一件简单的事，很麻烦，特别是想的很多但写的时候无从下手，这种感觉太恶心了；所以在这之前已经写了两篇文章来介绍这个项目，今天是第三篇，准备介绍一下项目的首页框架的搭建。行了，废话也不多说了，开始正文吧！

正文

按照惯例，还是放一下 Github 地址和 apk 下载地址吧。

apk 下载地址：www.pgyer.com/llj2

Github地址：github.com/zhujiang521…

接下来看一下实现好的样式吧！

cd6563ba426f0755c3980b096c147ae.png529bbec0097db6bae5030e2f708748d.png

6bb9a45aa21f2b5316c9113542d8d42.png49ccb6cad05ff8da90a48bb11d4c779.png

这就是首页的框架展示的内容，这篇文章并不是介绍这几个页面如何编写，而是介绍整个首页的搭建。

Bottom 导航栏

首先问大家一个问题，如果让你实现类似上图的底部导航栏你会怎样实现呢？

大概会有以下几种方案：

1、BottomNavigationView，这个就不多描述了，这是 Google 给我们提供的一个专门用于底部导航的 View，你只需要在新建 Activity 的时候选择 “Bottom Navigation Activity”，IDE 就会自动使用 BottomNavigationView 帮你生成好相应的代码了。

2、RadioGroup + ViewPager， 这是一种比较常见的方法，下面几个 tab 的导航按钮，可以切换不同的页面，页面切换使用了 ViewPager + Fragment 的组合，实现了滑动的页面效果，也可以不使用 ViewPager。

3、LinearLayout + TextView，这种也比较常见，通过是否 selected 来判断控件应该显示的图片和字体颜色，页面切换同样使用 ViewPager + Fragment 的组合。

。。。。。。

应该还有很多骚操作，就不一一列举了。**注意！这里的实现方式没有好坏之分，只有适合不适合的区别，没有哪一种实现比另外几种酒高大上。**下面我来说下我的实现方式吧。

我个人其实比较倾向于上面描述第三种的实现。第一种官方的用法也使用过，但是觉得可扩展性不强。第二种和第三种就看使用熟练度来选择了。

我看很多人使用的时候都喜欢在 Activity 的布局中直接添加进行使用，然后这些切换的操作自然都放在了 Activity 中，并不是说这种方法不好，只是感觉这样的话 Activity 有点臃肿，个人认为能放在 View 中完成的操作绝对不放在 Activity 或者 Fragment 中。（这种好像有个专用名词——控件化）

布局

先放下布局文件吧：

<?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">
    <FrameLayout
        android:id="@+id/flHomeFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
    </FrameLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_0_1"
        android:background="@color/text_color" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_55"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/llHomeATHome"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_one"
            android:drawablePadding="@dimen/dp_3"
            android:gravity="center"
            android:text="首页"
            android:textColor="@color/color_bottom_tv"
            android:textSize="@dimen/sp_11" />
        <TextView
            android:id="@+id/llHomeATCalendar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_two"
            android:drawablePadding="@dimen/dp_3"
            android:gravity="center"
            android:text="项目"
            android:textColor="@color/color_bottom_tv"
            android:textSize="@dimen/sp_11" />
        <TextView
            android:id="@+id/llHomeATObject"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_three"
            android:drawablePadding="@dimen/dp_3"
            android:gravity="center"
            android:text="公众号"
            android:textColor="@color/color_bottom_tv"
            android:textSize="@dimen/sp_11" />
        <TextView
            android:id="@+id/llHomeATMy"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_four"
            android:drawablePadding="@dimen/dp_3"
            android:gravity="center"
            android:text="我的"
            android:textColor="@color/color_bottom_tv"
            android:textSize="@dimen/sp_11" />
    </LinearLayout>
</LinearLayout>

布局很简单，最外面一层 LinearLayout ，里面一个 FrameLayout 用来放 Fragment ，下面一个 LinearLayout 包裹着 TextView ，TextView 用作 Tab 标签。

这里的 Tab 我并没有使用 ImageView + TextView ，而是直接使用了 TextView 的 drawableTop，能省一个控件是一个嘛！能少写一个是一个！还有一点需要注意的是 textColor 和 drawableTop 都使用了 selector，用来切换不同状态下应该显示的图片和文字颜色，接下来分别看一下吧！

首先是 textColor 的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/text_green" android:state_selected="true" />
    <item android:color="@color/black_33" android:state_selected="false" />
    <!-- 按压时 -->
    <item android:color="@color/black_33" android:state_pressed="true" />
</selector>

然后是 drawableTop 的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 当前窗口失去焦点时 -->
    <item android:drawable="@drawable/ic_nav_discover_normal" android:state_window_focused="false" />
    <!-- 不可用时 -->
    <item android:drawable="@drawable/ic_nav_discover_normal" android:state_enabled="false" />
    <!-- 被选中时 -->
    <item android:drawable="@drawable/ic_nav_discover_actived" android:state_selected="true" />
    <!-- 被激活时 -->
    <item android:drawable="@drawable/ic_nav_discover_actived" android:state_activated="true" />
    <!-- 默认时 -->
    <item android:drawable="@drawable/ic_nav_discover_normal" />
</selector>

textColor 的都一样，drawableTop 的只展示一个的吧，其余的都基本一样，只是图片不同而已。

代码

布局很简单咱们写完了，接下来就是代码了。想一想代码应该怎么写？首先来想一下这个控件咱们想要实现什么功能吧！点击肯定要能切换 Fragment ，而且 TextView 的字体和图片的状态也要进行相应的变化，差不多了，这个控件目前就有这么多要求，当然之后你想要加上角标也是可以的，添加一个对外的接口即可。

TextView 的字体和图片的状态改变这一点很好实现，咱们在布局文件中已经写好了 selector ，只需要改变 TextView 的 selected 即可：

for (j in textViews!!.indices) {
     textViews!![j].isSelected = position == j
}

很简单吧！textViews 就是 TextView 的集合，在初始化的时候放入即可：

textViews = arrayListOf(
    view.findViewById(R.id.llHomeATHome),
    view.findViewById(R.id.llHomeATCalendar),
    view.findViewById(R.id.llHomeATObject),
    view.findViewById(R.id.llHomeATMy)
)

状态可以改变之后就只剩 Fragment 的切换了：

/**
     * fragment的切换 实现底部导航栏的切换
     *
     * @param position 序号
     */
    protected open fun fragmentManger(position: Int) {
        mViewModel.setPage(position)
        val fragmentTransaction =
            mFragmentManager!!.beginTransaction()
        val targetFg: Fragment = mFragments!![position]
        val lastFg: Fragment = mFragments!![mLastFgIndex]
        mLastFgIndex = position
        if (lastFg.isAdded)
            fragmentTransaction.hide(lastFg)
        if (!targetFg.isAdded) {
            mFragmentManager!!.beginTransaction().remove(targetFg)
                .commitAllowingStateLoss()
            fragmentTransaction.add(R.id.flHomeFragment, targetFg)
        }
        fragmentTransaction.show(targetFg)
        fragmentTransaction.commitAllowingStateLoss()
    }

上面代码中的 mFragments 即为 Fragment 的集合，也是初始化的时候加入即可：

if (mFragments == null) {
    mFragments = arrayListOf()
    mFragments?.add(getCurrentFragment(0)!!)
    mFragments?.add(getCurrentFragment(1)!!)
    mFragments?.add(getCurrentFragment(2)!!)
    mFragments?.add(getCurrentFragment(3)!!)
}

最后加上 TextView 的点击事件即大功告成：

/**
     * 实现按钮的点击事件
     */
    override fun onClick(v: View) {
        when (v.id) {
            R.id.llHomeATHome -> fragmentManger(0)
            R.id.llHomeATCalendar -> fragmentManger(1)
            R.id.llHomeATObject -> fragmentManger(2)
            R.id.llHomeATMy -> fragmentManger(3)
        }
    }

使用 Bottom 导航栏

底部导航栏已经编写完成，使用很简单，和正常使用控件一样放入布局即可：

<?xml version="1.0" encoding="utf-8"?>
<com.zj.play.view.main.HomeBottomTabWidget xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/homeView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

然后直接在 Activity 中进行初始化即可，剩下的操作都在控件中了：

homeView.init(supportFragmentManager, viewModel)

现在咱们来看一下整个 Activity 的代码：

class MainActivity : BaseActivity() {
    private val viewModel by lazy { ViewModelProvider(this).get(MainViewModel::class.java) }
    override fun initView() {
        homeView.init(supportFragmentManager, viewModel)
    }
    override fun getLayoutId(): Int {
        return R.layout.activity_main
    }
    companion object {
        fun actionStart(context: Context) {
            val intent = Intent(context, MainActivity::class.java)
            context.startActivity(intent)
        }
    }
}

加上空行和括号也就二十行左右，是不是比直接在 Activity 中要简洁的多！

横屏适配

竖屏完美实现，但是横屏就凉凉了！四个大按钮平均堆在最下面

丑的一批！

5fb88a0f4234c45d643de419fe2a1c6.png

虽然大部分程序员的审美都不咋地，当然我更差，连我这样的审美都觉得丑了，那就证明是真的看不下去了，所以必须要进行优化。

于是就有了现在的横屏样式：

bc6d5019736577dee312fe369952450.pngd8d669548d9cf161dc464d11fcc87a9.pngf33fea36b35760e7ff68d17807b91e7.pngacf37f92f816a6e54e3b6d572d79bb8.png

点击右下角的按钮即会展开，按钮中间的图片表示当前的页面。

这样我觉得比刚才好看太多了！下面就来说下横屏的实现吧！

这里我用到了一个三方控件：

implementation 'com.cpacm:floatingmusicmenu:1.0.0'

同上面一样，把横屏的也抽成一个控件吧！

布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:orientation="vertical"
    tools:ignore="MissingDefaultResource">
    <FrameLayout
        android:id="@+id/flHomeFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <com.cpacm.FloatingMusicMenu
        android:id="@+id/fabMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginEnd="@dimen/dp_16"
        android:layout_marginBottom="@dimen/dp_16"
        app:fmm_backgroundTint="@color/floatBackground"
        app:fmm_button_interval="2dp"
        app:fmm_cover="@drawable/ic_nav_news_actived"
        app:fmm_floating_direction="left"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabHome"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/dp_16"
            android:layout_marginBottom="@dimen/dp_16"
            android:src="@drawable/selector_one"
            app:backgroundTint="@color/floatBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabRepo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/dp_16"
            android:layout_marginBottom="@dimen/dp_16"
            android:src="@drawable/selector_two"
            app:backgroundTint="@color/floatBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabProject"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/dp_16"
            android:layout_marginBottom="@dimen/dp_16"
            android:src="@drawable/selector_three"
            app:backgroundTint="@color/floatBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabProfile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/dp_16"
            android:layout_marginBottom="@dimen/dp_16"
            android:src="@drawable/selector_four"
            app:backgroundTint="@color/floatBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </com.cpacm.FloatingMusicMenu>
</FrameLayout>

因为 Fragment 要全屏展示，所以使用了 FrameLayout 来布局，把 FloatingMusicMenu 放在右下角的位置。剩下的这个布局没什么可说的了，大家可以下载 apk 进行体验。

代码

这里的需求和竖屏时候其实一样，都需要状态的切换和 Fragment 的切换，Fragment 的切换和上面一样就不赘述了，来看一下状态的切换吧：

fabMenu?.setMusicCover(
    BitmapFactory.decodeResource(
         context.resources,
         when (position) {
             0 -> R.drawable.ic_nav_news_actived
             1 -> R.drawable.ic_nav_tweet_actived
             2 -> R.drawable.ic_nav_discover_actived
             3 -> R.drawable.ic_nav_my_pressed
             else -> R.drawable.ic_nav_news_actived
         }
    )
)
if (fabMenu != null && fabMenu!!.isExpanded)
    fabMenu!!.toggle()

这就 OK 了。

但是会发现横屏和竖屏的功能都差不多，所以就可以抽取一个父类了：

abstract class BaseHomeBottomTabWidget @JvmOverloads constructor(
    context: Context?,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    layoutId: Int
) : LinearLayout(context, attrs, defStyleAttr), View.OnClickListener {
    private var mFragmentManager: FragmentManager? = null
    private var mFragments: java.util.ArrayList<Fragment>? = null
    private var mLastFgIndex = 0
    private lateinit var mViewModel: MainViewModel
    /**
     * 外部调用初始化，传入必要的参数
     *
     * @param fm
     */
    fun init(fm: FragmentManager?, viewModel: MainViewModel) {
        mFragmentManager = fm
        mViewModel = viewModel
        if (mFragments == null) {
            mFragments = arrayListOf()
            mFragments?.add(getCurrentFragment(0)!!)
            mFragments?.add(getCurrentFragment(1)!!)
            mFragments?.add(getCurrentFragment(2)!!)
            mFragments?.add(getCurrentFragment(3)!!)
        }
        fragmentManger(viewModel.getPage() ?: 0)
    }
    /**
     * 初始化 设置点击事件。
     *
     * @param view /
     */
    @Suppress("LeakingThis")
    abstract fun initView(view: View)
    /**
     * fragment的切换 实现底部导航栏的切换
     *
     * @param position 序号
     */
    protected open fun fragmentManger(position: Int) {
        mViewModel.setPage(position)
        val fragmentTransaction =
            mFragmentManager!!.beginTransaction()
        val targetFg: Fragment = mFragments!![position]
        val lastFg: Fragment = mFragments!![mLastFgIndex]
        mLastFgIndex = position
        if (lastFg.isAdded)
            fragmentTransaction.hide(lastFg)
        if (!targetFg.isAdded) {
            mFragmentManager!!.beginTransaction().remove(targetFg)
                .commitAllowingStateLoss()
            fragmentTransaction.add(R.id.flHomeFragment, targetFg)
        }
        fragmentTransaction.show(targetFg)
        fragmentTransaction.commitAllowingStateLoss()
    }
    init {
        initView(View.inflate(context, layoutId, this))
    }
}

使用

使用和竖屏是一样的，不过需要在 layout-land 文件夹下建立一个同名的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<com.zj.play.view.main.HomeBottomLandTabWidget xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/homeLandView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

然后在 Activity 使用时要对横竖屏做一下判断：

when (resources.configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
     true -> homeView.init(supportFragmentManager, viewModel)
     false -> homeLandView.init(supportFragmentManager, viewModel)
}

好了，这就可以了！

结尾

就先写到这里吧，其实代码并不多，大家可以直接去github.com/zhujiang521…进行查看代码，希望能够帮到大家

文章标签：
Android开发
开发工具
IDE
程序员
关键词：
Android框架
Android首页
Android框架搭建
Zhujiang
目录
相关文章
请看我回答~
|
4月前
|
物联网 区块链 vr&ar
未来已来：探索区块链、物联网与虚拟现实技术的融合与应用安卓与iOS开发中的跨平台框架选择
【8月更文挑战第30天】在科技的巨轮下，新技术不断涌现，引领着社会进步。本文将聚焦于当前最前沿的技术——区块链、物联网和虚拟现实，探讨它们各自的发展趋势及其在未来可能的应用场景。我们将从这些技术的基本定义出发，逐步深入到它们的相互作用和集成应用，最后展望它们如何共同塑造一个全新的数字生态系统。
请看我回答~
65 0
游客zllgslqrsw3f6
|
5月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台框架解析
在移动应用开发的广阔舞台上，安卓和iOS一直是两大主角。随着技术的进步，开发者们渴望能有一种方式，让他们的应用能同时在这两大平台上运行，而不必为每一个平台单独编写代码。这就是跨平台框架诞生的背景。本文将探讨几种流行的跨平台框架，包括它们的优势、局限性，以及如何根据项目需求选择合适的框架。我们将从技术的深度和广度两个维度，对这些框架进行比较分析，旨在为开发者提供一个清晰的指南，帮助他们在安卓和iOS的开发旅程中，做出明智的选择。
游客zllgslqrsw3f6
148 2
dufadayang
|
1月前
|
算法 JavaScript Android开发
weiV 框架在 Android 系统中的实际性能表现如何？
【10月更文挑战第30天】
dufadayang
30 1
aliyun8599273441-30642
|
25天前
|
开发框架 Dart Android开发
安卓与iOS的跨平台开发：Flutter框架深度解析
在移动应用开发的海洋中，Flutter作为一艘灵活的帆船，正引领着开发者们驶向跨平台开发的新纪元。本文将揭开Flutter神秘的面纱，从其架构到核心特性，再到实际应用案例，我们将一同探索这个由谷歌打造的开源UI工具包如何让安卓与iOS应用开发变得更加高效而统一。你将看到，借助Flutter，打造精美、高性能的应用不再是难题，而是变成了一场创造性的旅程。
aliyun8599273441-30642
38 0
mzlogin
|
2月前
|
Java 程序员 API
Android｜集成 slf4j + logback 作为日志框架
做个简单改造，统一 Android APP 和 Java 后端项目打印日志的体验。
mzlogin
128 1
众所周知
|
3月前
|
前端开发 Java 数据库
💡Android开发者必看！掌握这5大框架，轻松打造爆款应用不是梦！🏆
在Android开发领域，框架犹如指路明灯，助力开发者加速应用开发并提升品质。本文将介绍五大必备框架：Retrofit简化网络请求，Room优化数据库访问，MVVM架构提高代码可维护性，Dagger 2管理依赖注入，Jetpack Compose革新UI开发。掌握这些框架，助你在竞争激烈的市场中脱颖而出，打造爆款应用。
众所周知
414 3
Ant.Dream
|
3月前
|
编译器 Android开发 开发者
带你了解Android Jetpack库中的依赖注入框架：Hilt
本文介绍了Hilt，这是Google为Android开发的依赖注入框架，基于Dagger构建，旨在简化依赖注入过程。Hilt通过自动化的组件和注解减少了DI的样板代码，提高了应用的可测试性和可维护性。文章详细讲解了Hilt的主要概念、基本用法及原理，帮助开发者更好地理解和应用Hilt。
Ant.Dream
93 8
请看我回答~
|
4月前
|
设计模式 Java Android开发
探索安卓应用开发：从新手到专家的旅程探索iOS开发中的SwiftUI框架
【8月更文挑战第29天】本文旨在通过一个易于理解的旅程比喻，带领读者深入探讨安卓应用开发的各个方面。我们将从基础概念入手，逐步过渡到高级技术，最后讨论如何维护和推广你的应用。无论你是编程新手还是有经验的开发者，这篇文章都将为你提供有价值的见解和实用的代码示例。让我们一起开始这段激动人心的旅程吧！
请看我回答~
53 2
阿迷创客
|
4月前
|
Android开发
基于Amlogic 安卓9.0, 驱动简说（三）：使用misc框架，让驱动更简单
如何使用Amlogic T972安卓9.0系统上的misc框架来简化驱动程序开发，通过misc框架自动分配设备号并创建设备文件，从而减少代码量并避免设备号冲突。
阿迷创客
57 0
基于Amlogic 安卓9.0, 驱动简说（三）：使用misc框架，让驱动更简单
招风的黑耳
|
4月前
|
存储 前端开发 Java
Android MVVM框架详解与应用
在Android开发中，随着应用复杂度的增加，如何有效地组织和管理代码成为了一个重要的问题。MVVM（Model-View-ViewModel）架构模式因其清晰的结构和高效的开发效率，逐渐成为Android开发者们青睐的架构模式之一。本文将详细介绍Android MVVM框架的基本概念、优势、实现流程以及一个实际案例。
招风的黑耳
145 0