Android實(shí)現(xiàn)基本功能的新聞應(yīng)用

更新時(shí)間：2022年12月01日 16:40:23 作者：z啵唧啵唧

這篇文章主要介紹了一個(gè)簡(jiǎn)易功能的Android新聞應(yīng)用實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

先準(zhǔn)備好一個(gè)新聞實(shí)體類

package com.zb.fragmentbestpractice
/**
 * title:表示新聞的實(shí)體類
 * content:表示新聞的內(nèi)容
 */
class News(val title: String, val content: String) {
}

新建布局文件news_content_frag.xml,作為新聞布局的內(nèi)容

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/contentLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="invisible">
        <TextView
            android:id="@+id/newsTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp"
            android:textSize="20sp" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000" />
        <TextView
            android:id="@+id/newsContent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:padding="15dp"
            android:textSize="18sp" />
    </LinearLayout>
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="#000000" />
</RelativeLayout>

新聞布局主要分為兩個(gè)部分:頭部部分顯示新聞標(biāo)題,正文部分顯示內(nèi)容,中間使用一條水平方向的細(xì)線進(jìn)行隔開,除此之外還有一條豎直防線的細(xì)線,它的作用是在雙頁模式下將左側(cè)新聞列表和右側(cè)新聞的內(nèi)容進(jìn)行分隔開.
我們還需要將新聞內(nèi)容的布局設(shè)置成為不可見,因?yàn)樵陔p頁模式下,如果還沒有選中新聞列表中的任何一條新聞,是不應(yīng)該顯示新聞內(nèi)容布局的.
接下來新建一個(gè)NewsContentFragment類

class NewsContentFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.news_content_frag, container, false)
    }
    /**
     * 該方法用于將新聞的標(biāo)題和內(nèi)容顯示在我們剛剛定義的界面上,
     * 當(dāng)調(diào)用了refresh方法時(shí),需要將我們剛才隱藏的新聞內(nèi)容布局設(shè)置成為可見
     */
    fun refresh(title: String, content: String) {
        //將布局設(shè)置成可見
        contentLayout.visibility = View.VISIBLE
        //設(shè)置新聞標(biāo)題內(nèi)容
        newsTitle.text = title
        //設(shè)置新聞內(nèi)容
        newsContent.text = content
    }
}

在onCreatView()方法中加載了我們剛剛創(chuàng)建的布局
這樣就把新聞內(nèi)容的Fragment和布局創(chuàng)建好了,但是它們都是在雙頁模式當(dāng)中使用的,如果想在單頁模式中使用,我們還需要?jiǎng)?chuàng)建一個(gè)Activity
創(chuàng)建一個(gè)NewsContentActivity

<?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">
    <fragment
        android:id="@+id/newsContentFrag"
        android:name="com.zb.fragmentbestpractice.NewsContentFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

在這個(gè)地方發(fā)揮了代碼的復(fù)用性,直接在布局中引入了NewsContentFragment.這樣相當(dāng)于把news_content_frag布局的內(nèi)容自動(dòng)加了進(jìn)來
修改NewsContentActivity中的代碼

class NewsContentActivity : AppCompatActivity() {
    companion object {
        fun actionStart(context: Context, title: String, content: String) {
            val intent = Intent(context, NewsContentActivity::class.java).apply {
                putExtra("news title", title)
                putExtra("news content", content)
            }
            context.startActivity(intent)
        }
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_news_content)
        val title = intent.getStringExtra("news title")//獲取傳入的新聞標(biāo)題
        val content = intent.getStringExtra("news content")//獲取傳入的新聞內(nèi)容
        if (title != null && content!= null) {
            val fragment = newsContentFrag as NewsContentFragment
            fragment.refresh(title, content) //刷新NewsContentFragment 界面
        }
    }
}

onCreate()方法當(dāng)中,我們通過Intent獲取到了傳入的新聞標(biāo)題和新聞內(nèi)容,然后獲取NewsContentFragment實(shí)例,接著調(diào)用它的refres()方法,將新聞標(biāo)題和內(nèi)容傳入,就可以把這些數(shù)據(jù)顯示出來了
接下來創(chuàng)建一個(gè)用于顯示新聞列表的布局,新建news_title_frag.xml

<?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">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/newsTitleRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

該布局比較簡(jiǎn)單,里面只有一個(gè)用于顯示新聞列表的RecyclerView,既然要用到RecyclerView就要編寫子項(xiàng)的布局,新建news_item.xml作為RecyclerView子項(xiàng)的布局

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/newsTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:ellipsize="end"
    android:textSize="18sp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp">
</TextView>

子項(xiàng)布局也比較簡(jiǎn)單,只有一個(gè)TextView
其中android:padding表示給空間周圍加上補(bǔ)白,這樣不至于讓文本內(nèi)容,緊靠在邊緣上
android:ellipsize用于設(shè)定當(dāng)文本內(nèi)容超出控件寬度時(shí)的縮略方式,這里指定成為end表示在尾部進(jìn)行省略
新聞列表和子布局都創(chuàng)建好了,現(xiàn)在需要一個(gè)用于展示新聞列表的地方,這里新建NewsTitleFragment作為列表的Fragment

class NewsTitleFragment : Fragment() {
    private var isTwoPane = false
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.news_title_frag, container, false)
    }
    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        isTwoPane = activity?.findViewById<View>(R.id.newsContent.newsContentLayout) != null
    }
}

其中的onActivityCreated()方法通過在Activity中能否找到一個(gè)id為newsContentLayout的View,來判斷當(dāng)前是雙頁模式還是單頁模式
因此我們需要讓這個(gè)id為newsContentLayout的View旨在雙頁模式當(dāng)中才會(huì)出現(xiàn).
使用限定符實(shí)現(xiàn)id為newsContentLayout的View只在雙頁模式當(dāng)中才能出現(xiàn).
修改activity_main.xml中的代碼

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/newsTitleLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        android:id="@+id/newsTitleFrag"
        android:name="com.zb.fragmentbestpractice.NewsTitleFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
</FrameLayout>

上述代碼表示只會(huì)在單頁模式下加載一個(gè)新聞標(biāo)題的Fragment
然后新建一個(gè)layout-sw600dp文件夾,在這個(gè)文件夾下面創(chuàng)建一個(gè)activity_main.xml文件,代碼如下

<?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="horizontal">
    <fragment
        android:id="@+id/newsTitleFrag"
        android:name="com.zb.fragmentbestpractice.NewsTitleFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <FrameLayout
        android:id="@+id/newsContentLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">
        <fragment
            android:id="@+id/newsContentFrag"
            android:name="com.zb.fragmentbestpractice.NewsContentFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
</LinearLayout>

可以看出在雙頁模式下面,同時(shí)引入了兩個(gè)fragment,并將新聞內(nèi)容的fragment放在了Fragment的布局下面,這個(gè)Fragment布局id為newsContentFrag
因此只要能夠找到這個(gè)布局的id就說明是雙頁模式,反之來說就是單頁模式.
接下來就是在NewsTitleFragment中通過RecyclerView將新聞列表展示出來
在NewsTitleFragment中新建一個(gè)內(nèi)部類NewsAdapter,來作為RecyclerView的適配器

package com.zb.fragmentbestpractice
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_news_content.*
import kotlinx.android.synthetic.main.news_item.view.*
import kotlinx.android.synthetic.main.news_title_frag.*
/**
 * 用于展示新聞列表
 */
class NewsTitleFragment : Fragment() {
    private var isTwoPane = false
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.news_title_frag, container, false)
    }
    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        isTwoPane = activity?.findViewById<View>(R.id.newsContentLayout) != null
        val layoutManager = LinearLayoutManager(activity)
        newsTitleRecyclerView.layoutManager = layoutManager
        val adapter = NewsAdapter(getNews())
        newsTitleRecyclerView.adapter = adapter
    }
    private fun getNews(): List<News> {
        val newsList = ArrayList<News>()
        for (i in 1..50) {
            val news =
                News("This is news title $i", getRandomLengthString("This is news content $i."))
            newsList.add(news)
        }
        return newsList
    }
    private fun getRandomLengthString(str: String): String {
        val n = (1..20).random()
        val builder = StringBuilder()
        repeat(n) {
            builder.append(str)
        }
        return builder.toString()
    }
    /**
     * 內(nèi)部類,用來作為RecyclerView的適配器
     */
    inner class NewsAdapter(val newsList: List<News>) :
        RecyclerView.Adapter<NewsAdapter.ViewHolder>() {
        inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
            val newsTitle: TextView = view.newsTitle
        }
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.news_item, parent, false)
            val holder = ViewHolder(view)
            holder.itemView.setOnClickListener {
                //在newsList當(dāng)中先獲取news實(shí)例
                val news = newsList[holder.adapterPosition]
                //根據(jù)isTwoPane判斷是單頁模式還是雙頁模式
                if (isTwoPane) {
                    //如果是雙頁模式,則刷新newsContentFragment中的內(nèi)容
                    val fragment = newsContentFrag as NewsContentFragment
                    fragment.refresh(news.title, news.content)
                } else {
                    //如果是單頁模式,則直接啟動(dòng)NewsContentActivity
                    NewsContentActivity.actionStart(parent.context, news.title, news.content)
                }
            }
            return holder
        }
        override fun onBindViewHolder(holder: ViewHolder, position: Int) {
            val news = newsList[position]
            holder.newsTitle.text = news.title
        }
        override fun getItemCount(): Int {
            return newsList.size
        }
    }
}