devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android类似微信首页的页面开发教程(Kotlin)二_android首页界面

作者：菜鸟追梦旅行 | 2024-04-05 10:27:41

赞

踩

android首页界面

前提条件

安装并配置好Android Studio

Android Studio Electric Eel | 2022.1.1 Patch 2
Build #AI-221.6008.13.2211.9619390, built on February 17, 2023
Runtime version: 11.0.15+0-b2043.56-9505619 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Windows 11 10.0
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 6
Registry:
    external.system.auto.import.disabled=true
    ide.text.editor.with.preview.show.floating.toolbar=false
    ide.balloon.shadow.size=0
 
Non-Bundled Plugins:
    com.intuit.intellij.makefile (1.0.15)
    com.github.setial (4.0.2)
    com.alayouni.ansiHighlight (1.2.4)
    GsonOrXmlFormat (2.0)
    GLSL (1.19)
    com.mistamek.drawablepreview.drawable-preview (1.1.5)
    com.layernet.plugin.adbwifi (1.0.5)
    com.likfe.ideaplugin.eventbus3 (2020.0.2)

gradle-wrapper.properties

#Tue Apr 25 13:34:44 CST 2023
distributionBase=GRADLE_USER_HOME
distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-bin.zip
distributionPath=wrapper/dists
zipStorePath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME

build.gradle(:Project)

  1. // Top-level build file where you can add configuration options common to all sub-projects/modules.
  2. plugins {
  3.     id 'com.android.application' version '7.3.1' apply false
  4.     id 'com.android.library' version '7.3.1' apply false
  5.     id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
  6. }

setting.gradle

  1. pluginManagement {
  2.     repositories {
  3.         google()
  4.         mavenCentral()
  5.         gradlePluginPortal()
  6.         maven { url 'https://jitpack.io' }
  7.     }
  8. }
  9. dependencyResolutionManagement {
  10.     repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  11.     repositories {
  12.         google()
  13.         mavenCentral()
  14.         gradlePluginPortal()
  15.         maven { url 'https://jitpack.io' }
  16.     }
  17. }
  18. rootProject.name = "logindemo"
  19. include ':app'

build.gralde(:app)

  1. plugins {
  2.     id 'com.android.application'
  3.     id 'org.jetbrains.kotlin.android'
  4. }
  5.  
  6. android {
  7.     namespace 'com.example.logindemo'
  8.     compileSdk 33
  9.  
  10.     defaultConfig {
  11.         applicationId "com.example.logindemo"
  12.         minSdk 26
  13.         targetSdk 33
  14.         versionCode 1
  15.         versionName "1.0"
  16.  
  17.         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  18.     }
  19.  
  20.     buildTypes {
  21.         release {
  22.             minifyEnabled false
  23.             proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
  24.         }
  25.     }
  26.     compileOptions {
  27.         sourceCompatibility JavaVersion.VERSION_11
  28.         targetCompatibility JavaVersion.VERSION_11
  29.     }
  30.     kotlinOptions {
  31.         jvmTarget = '1.8'
  32.     }
  33. }
  34.  
  35. dependencies {
  36.  
  37.     implementation 'androidx.core:core-ktx:1.7.0'
  38.     implementation 'androidx.appcompat:appcompat:1.6.1'
  39.     implementation 'com.google.android.material:material:1.8.0'
  40.     implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
  41.     testImplementation 'junit:junit:4.13.2'
  42.     androidTestImplementation 'androidx.test.ext:junit:1.1.3'
  43.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
  44.  
  45.     // 沉浸式状态栏 https://github.com/gyf-dev/ImmersionBar
  46.     api 'com.gyf.immersionbar:immersionbar:3.0.0'
  47.     api 'com.gyf.immersionbar:immersionbar-components:3.0.0' // fragment快速实现（可选）
  48.     api 'com.gyf.immersionbar:immersionbar-ktx:3.0.0' // kotlin扩展（可选）
  49. }

对Kotlin语言有基本了解

内容在前一篇博客中写了基础配置，如果本篇内容看不懂，可以先去上一篇。

增加title

 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:fitsSystemWindows="true"
  8.     tools:context=".MainActivity">
  9.  
  10.     <TextView
  11.         android:id="@+id/titleTv"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="50dp"
  14.         android:text="微信"
  15.         android:textColor="#000000"
  16.         android:textSize="20sp"
  17.         android:gravity="center"
  18.         android:background="@color/title"
  19.         app:layout_constraintTop_toTopOf="parent"/>
  20.  
  21.     <com.google.android.material.tabs.TabLayout
  22.         android:id="@+id/tabLayout"
  23.         android:layout_width="match_parent"
  24.         android:layout_height="wrap_content"
  25.         app:layout_constraintBottom_toBottomOf="parent"
  26.         app:tabIndicatorColor="@color/teal_200"
  27.         app:tabSelectedTextColor="@color/teal_200"
  28.         app:tabTextColor="@color/black" />
  29.  
  30.     <androidx.viewpager.widget.ViewPager
  31.         android:id="@+id/viewPager"
  32.         android:layout_width="match_parent"
  33.         android:layout_height="0dp"
  34.         app:layout_constraintTop_toBottomOf="@+id/titleTv"
  35.         app:layout_constraintBottom_toTopOf="@+id/tabLayout"/>
  36.  
  37. </androidx.constraintlayout.widget.ConstraintLayout>

增加了title之后，在切换fragment时，需要对应的title文字变化

  1. package com.example.logindemo
  2.  
  3. import android.os.Bundle
  4. import android.widget.TextView
  5. import androidx.appcompat.app.AppCompatActivity
  6. import androidx.fragment.app.Fragment
  7. import androidx.fragment.app.FragmentPagerAdapter
  8. import androidx.viewpager.widget.ViewPager
  9. import com.example.logindemo.fragment.ChatFragment
  10. import com.example.logindemo.fragment.ContactsFragment
  11. import com.example.logindemo.fragment.DiscoverFragment
  12. import com.google.android.material.tabs.TabLayout
  13. import com.gyf.immersionbar.ImmersionBar
  14.  
  15. class MainActivity : AppCompatActivity() {
  16.  
  17.     private lateinit var viewPager: ViewPager
  18.     private lateinit var tabLayout: TabLayout
  19.     private lateinit var titleTv: TextView
  20.  
  21.     override fun onCreate(savedInstanceState: Bundle?) {
  22.         super.onCreate(savedInstanceState)
  23.         ImmersionBar.with(this)
  24.             .statusBarDarkFont(true)
  25.             .statusBarColor(R.color.title)
  26.             .navigationBarColor(R.color.white)
  27.             .navigationBarDarkIcon(true)
  28.             .init()
  29.         setContentView(R.layout.activity_main)
  30.         val fragments = listOf(
  31.             ChatFragment(),
  32.             ContactsFragment(),
  33.             DiscoverFragment()
  34.         )
  35.         titleTv = findViewById(R.id.titleTv)
  36.         viewPager = findViewById(R.id.viewPager)
  37.         tabLayout = findViewById(R.id.tabLayout)
  38.  
  39.         viewPager.adapter = ViewPagerAdapter(supportFragmentManager, fragments)
  40.         tabLayout.setupWithViewPager(viewPager)
  41.  
  42.         tabLayout.getTabAt(0)?.text = "聊天"
  43.         tabLayout.getTabAt(1)?.text = "联系人"
  44.         tabLayout.getTabAt(2)?.text = "发现"
  45.  
  46.         tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
  47.             override fun onTabSelected(tab: TabLayout.Tab?) {
  48.                 titleTv.text = tab?.text
  49.             }
  50.  
  51.             override fun onTabUnselected(tab: TabLayout.Tab?) {
  52.  
  53.             }
  54.  
  55.             override fun onTabReselected(tab: TabLayout.Tab?) {
  56.  
  57.             }
  58.         })
  59.     }
  60.  
  61.     class ViewPagerAdapter(
  62.         fragmentManager: androidx.fragment.app.FragmentManager,
  63.         private val fragments: List<Fragment>
  64.     ) : FragmentPagerAdapter(fragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
  65.  
  66.         override fun getItem(position: Int): Fragment {
  67.             return fragments[position]
  68.         }
  69.  
  70.         override fun getCount(): Int {
  71.             return fragments.size
  72.         }
  73.     }
  74. }

修改fragment

布局中增加了RecyclerView显示多条目

fragment_chat.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <androidx.recyclerview.widget.RecyclerView
  7.         android:id="@+id/recyclerView"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"/>
  10.  
  11. </androidx.constraintlayout.widget.ConstraintLayout>

fragment_contacts.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <androidx.recyclerview.widget.RecyclerView
  7.         android:id="@+id/recyclerView"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"/>
  10.  
  11. </androidx.constraintlayout.widget.ConstraintLayout>

fragment_discover.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <androidx.recyclerview.widget.RecyclerView
  7.         android:id="@+id/recyclerView"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"/>
  10.  
  11. </androidx.constraintlayout.widget.ConstraintLayout>

fragment中的内容增加如下

  1. package com.example.logindemo.fragment
  2.  
  3. import android.os.Bundle
  4. import android.view.LayoutInflater
  5. import android.view.View
  6. import android.view.ViewGroup
  7. import androidx.fragment.app.Fragment
  8. import androidx.recyclerview.widget.LinearLayoutManager
  9. import androidx.recyclerview.widget.RecyclerView
  10. import com.example.logindemo.R
  11. import com.example.logindemo.base.BaseAdapter
  12. import com.example.logindemo.bean.ChatBean
  13.  
  14. class ChatFragment : Fragment() {
  15.  
  16.     private lateinit var recyclerView: RecyclerView
  17.  
  18.     override fun onCreateView(
  19.         inflater: LayoutInflater, container: ViewGroup?,
  20.         savedInstanceState: Bundle?
  21.     ): View? {
  22.         val view = inflater.inflate(R.layout.fragment_chat, container, false)
  23.         recyclerView = view.findViewById(R.id.recyclerView)
  24.         val data = ArrayList<ChatBean>()
  25.         data.add(ChatBean("头像0", "用户0", "聊天记录0", "4月25日"))
  26.         data.add(ChatBean("头像1", "用户1", "聊天记录1", "4月24日"))
  27.         data.add(ChatBean("头像2", "用户2", "聊天记录2", "4月23日"))
  28.         data.add(ChatBean("头像3", "用户3", "聊天记录3", "4月22日"))
  29.         data.add(ChatBean("头像4", "用户4", "聊天记录4", "4月21日"))
  30.         data.add(ChatBean("头像5", "用户5", "聊天记录5", "4月20日"))
  31.         data.add(ChatBean("头像6", "用户6", "聊天记录6", "4月19日"))
  32.         data.add(ChatBean("头像7", "用户7", "聊天记录7", "4月18日"))
  33.         data.add(ChatBean("头像8", "用户8", "聊天记录8", "4月17日"))
  34.         data.add(ChatBean("头像9", "用户9", "聊天记录9", "4月16日"))
  35.         recyclerView.layoutManager = LinearLayoutManager(context)
  36.         recyclerView.adapter = BaseAdapter(data)
  37.         return view
  38.     }
  39. }
  1. package com.example.logindemo.fragment
  2.  
  3. import android.os.Bundle
  4. import android.view.LayoutInflater
  5. import android.view.View
  6. import android.view.ViewGroup
  7. import androidx.fragment.app.Fragment
  8. import androidx.recyclerview.widget.LinearLayoutManager
  9. import androidx.recyclerview.widget.RecyclerView
  10. import com.example.logindemo.R
  11. import com.example.logindemo.base.BaseAdapter
  12. import com.example.logindemo.bean.ChatBean
  13.  
  14. class ContactsFragment : Fragment() {
  15.     private lateinit var recyclerView: RecyclerView
  16.     override fun onCreateView(
  17.         inflater: LayoutInflater, container: ViewGroup?,
  18.         savedInstanceState: Bundle?
  19.     ): View? {
  20.         val view = inflater.inflate(R.layout.fragment_contacts, container, false)
  21.         recyclerView = view.findViewById(R.id.recyclerView)
  22.         val data = ArrayList<ChatBean>()
  23.         data.add(ChatBean("头像0", "用户0", "", ""))
  24.         data.add(ChatBean("头像1", "用户1", "", ""))
  25.         data.add(ChatBean("头像2", "用户2", "", ""))
  26.         data.add(ChatBean("头像3", "用户3", "", ""))
  27.         data.add(ChatBean("头像4", "用户4", "", ""))
  28.         data.add(ChatBean("头像5", "用户5", "", ""))
  29.         data.add(ChatBean("头像6", "用户6", "", ""))
  30.         data.add(ChatBean("头像7", "用户7", "", ""))
  31.         data.add(ChatBean("头像8", "用户8", "", ""))
  32.         data.add(ChatBean("头像9", "用户9", "", ""))
  33.         recyclerView.layoutManager = LinearLayoutManager(context)
  34.         recyclerView.adapter = BaseAdapter(data)
  35.         return view
  36.     }
  37. }
  1. package com.example.logindemo.fragment
  2.  
  3. import android.os.Bundle
  4. import android.view.LayoutInflater
  5. import android.view.View
  6. import android.view.ViewGroup
  7. import androidx.fragment.app.Fragment
  8. import androidx.recyclerview.widget.LinearLayoutManager
  9. import androidx.recyclerview.widget.RecyclerView
  10. import com.example.logindemo.R
  11. import com.example.logindemo.base.BaseAdapter
  12. import com.example.logindemo.bean.ChatBean
  13.  
  14. class DiscoverFragment : Fragment() {
  15.     private lateinit var recyclerView: RecyclerView
  16.     override fun onCreateView(
  17.         inflater: LayoutInflater, container: ViewGroup?,
  18.         savedInstanceState: Bundle?
  19.     ): View? {
  20.         val view = inflater.inflate(R.layout.fragment_discover, container, false)
  21.         recyclerView = view.findViewById(R.id.recyclerView)
  22.         val data = ArrayList<ChatBean>()
  23.         data.add(ChatBean("头像0", "朋友圈", "", ""))
  24.         data.add(ChatBean("头像1", "视频号", "", ""))
  25.         data.add(ChatBean("头像2", "直播", "", ""))
  26.         data.add(ChatBean("头像2", "扫一扫", "", ""))
  27.         data.add(ChatBean("头像2", "摇一摇", "", ""))
  28.         data.add(ChatBean("头像2", "看一看", "", ""))
  29.         data.add(ChatBean("头像2", "搜一搜", "", ""))
  30.         data.add(ChatBean("头像2", "附近", "", ""))
  31.         data.add(ChatBean("头像2", "购物", "", ""))
  32.         data.add(ChatBean("头像2", "游戏", "", ""))
  33.         data.add(ChatBean("头像2", "小程序", "", ""))
  34.         recyclerView.layoutManager = LinearLayoutManager(context)
  35.         recyclerView.adapter = BaseAdapter(data)
  36.         return view
  37.     }
  38. }

条目适配器

  1. package com.example.logindemo.base
  2.  
  3. import android.view.LayoutInflater
  4. import android.view.View
  5. import android.view.ViewGroup
  6. import android.widget.TextView
  7. import androidx.recyclerview.widget.RecyclerView
  8. import com.example.logindemo.R
  9. import com.example.logindemo.bean.ChatBean
  10.  
  11. class BaseAdapter(private val data: List<ChatBean>) :
  12.     RecyclerView.Adapter<BaseAdapter.BaseHolder>() {
  13.  
  14.     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseHolder {
  15.         val view = LayoutInflater.from(parent.context).inflate(R.layout.base_item, null, false);
  16.         return BaseHolder(view)
  17.     }
  18.  
  19.     override fun getItemCount(): Int {
  20.         return data.size
  21.     }
  22.  
  23.     override fun onBindViewHolder(holder: BaseHolder, position: Int) {
  24.  
  25.         holder.headTv.visibility = if (data[position].head.isEmpty()) View.GONE else View.VISIBLE
  26.         holder.nickTv.visibility = if (data[position].nick.isEmpty()) View.GONE else View.VISIBLE
  27.         holder.newestTv.visibility = if (data[position].newest.isEmpty()) View.GONE else View.VISIBLE
  28.         holder.dateTv.visibility = if (data[position].date.isEmpty()) View.GONE else View.VISIBLE
  29.  
  30.         holder.headTv.text = data[position].head
  31.         holder.nickTv.text = data[position].nick
  32.         holder.newestTv.text = data[position].newest
  33.         holder.dateTv.text = data[position].date
  34.     }
  35.  
  36.     class BaseHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
  37.         val headTv: TextView = itemView.findViewById(R.id.headTv)
  38.         val nickTv: TextView = itemView.findViewById(R.id.nickTv)
  39.         val newestTv: TextView = itemView.findViewById(R.id.newestTv)
  40.         val dateTv: TextView = itemView.findViewById(R.id.dateTv)
  41.     }
  42.  
  43. }

数据类型

  1. package com.example.logindemo.bean
  2.  
  3. data class ChatBean(val head: String, val nick: String, val newest: String, val date: String) {
  4.  
  5. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/365047
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号