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…