Android JetPack 快速构建相似微信主界面

本文旨在于实现viewpager2+bottomview实现微信的主界面

本项目地址 github.com/wsdydeni/Na…

• 导入依赖

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".MainActivity">
     <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent">
         <fragment app:navGraph="@navigation/main_navigation" app:defaultNavHost="true" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/main_nav_fragment" />
     </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>复制代码

在activity_main.xml中引入NavHostFragment 并配置navgraph 

<navigation 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/main_navigation" app:startDestination="@id/main_fragment" tools:ignore="UnusedNavigation">
    <fragment android:id="@+id/main_fragment" tools:layout="@layout/fragment_main" android:name="com.example.navigationdemo.fragment.MainFragment">
        <action app:destination="@id/detail_fragment" android:id="@+id/main_fragment_to_detail_fragment"/>
    </fragment>
    <fragment android:id="@+id/detail_fragment" tools:layout="@layout/fragment_detail" android:name="com.example.navigationdemo.fragment.DetailFragment"/>
</navigation>复制代码

在fragment_main.xml中实现viewpager2+bottomview的布局

<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">
        <com.google.android.material.bottomnavigation.BottomNavigationView app:menu="@menu/main_menu" android:id="@+id/bottom_btn_view" app:itemIconTint="@color/selector_tab_color" app:itemTextColor="@color/selector_tab_color" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/main_view_pager" android:layout_width="match_parent" app:itemHorizontalTranslationEnabled="false" android:layout_height="?attr/actionBarSize"/>
        <androidx.viewpager2.widget.ViewPager2 android:id="@+id/main_view_pager" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/bottom_btn_view" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>复制代码

给咱们可爱的viewpager2弄一个适配器 这里参照了一下谷歌官方项目的实现方式

const val HOME_PAGE_INDEX = 0
const val CONTACT_PAGE_INDEX = 1
const val FIND_PAGE_INDEX = 2
const val MINE_PAGE_INDEX = 3
class MainViewPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    private val fragments : Map<Int, () -> Fragment> = mapOf(
        HOME_PAGE_INDEX to { HomeFragment() },
        CONTACT_PAGE_INDEX to { ContactFragment() },
        FIND_PAGE_INDEX to { FindFragment() },
        MINE_PAGE_INDEX to { MineFragment()}
    )

    override fun createFragment(position: Int): Fragment {
        return fragments[position]?.invoke() ?: throw IndexOutOfBoundsException()
    }
 
   override fun getItemCount(): Int = fragments.size
}复制代码

给bottomview配置tab 就是添加menu

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/home" android:title="@string/wechat" android:icon="@mipmap/ic_home"/>
    <item android:id="@+id/contact" android:title="@string/contact" android:icon="@mipmap/ic_contact"/>
    <item android:id="@+id/find" android:title="@string/find" android:icon="@mipmap/ic_find"/>
    <item android:id="@+id/mine" android:title="@string/mine" android:icon="@mipmap/ic_mine"/>
</menu>复制代码

还能够给item设置颜色

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#66ee78" android:state_checked="true"/>
    <item android:color="#b4b4b4" android:state_checked="false"/>
</selector>复制代码

在mainfragment中实现viewpager和bottomview的联动

说着联动 其实就是点击事件 hhhhhhhhhhhhhhhhh~~~

class MainFragment : Fragment(){
    private lateinit var bottomNavigationView: BottomNavigationView
    lateinit var viewPager2 : ViewPager2
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val binding = FragmentMainBinding.inflate(inflater,container,false)
        viewPager2 = binding.mainViewPager
        bottomNavigationView = binding.bottomBtnView
        bottomNavigationView.setOnNavigationItemSelectedListener(listener)
        viewPager2.adapter = MainViewPagerAdapter(this)
        return binding.root
    }
    private val listener = BottomNavigationView.OnNavigationItemSelectedListener { menuItem ->
        when(menuItem.itemId){
            R.id.home -> setCurrentItem(HOME_PAGE_INDEX)
            R.id.contact -> setCurrentItem(CONTACT_PAGE_INDEX)
            R.id.find -> setCurrentItem(FIND_PAGE_INDEX)
            R.id.mine -> setCurrentItem(MINE_PAGE_INDEX)
        }
        true
    }
    private fun setCurrentItem(position : Int) {
        viewPager2.setCurrentItem(position,false)
    }
}复制代码

跳转fragment

findNavController().navigate(R.id.detail_fragment)复制代码

还有不少种方法跳转 相似于Intent 可自行去官网看API 差很少就结束啦

有点辣眼睛 哈哈哈 将就着看一下

感谢各位的浏览

这是一篇有关于指纹识别的文章 你们也能够看一下

juejin.im/post/5da06b…