Android實現基本功能的新聞應用

Posted on 2022-12-03 by WalkonNet

先準備好一個新聞實體類

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

新建佈局文件news_content_frag.xml,作為新聞佈局的內容

<?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>

新聞佈局主要分為兩個部分:頭部部分顯示新聞標題,正文部分顯示內容,中間使用一條水平方向的細線進行隔開,除此之外還有一條豎直防線的細線,它的作用是在雙頁模式下將左側新聞列表和右側新聞的內容進行分隔開.
我們還需要將新聞內容的佈局設置成為不可見,因為在雙頁模式下,如果還沒有選中新聞列表中的任何一條新聞,是不應該顯示新聞內容佈局的.
接下來新建一個NewsContentFragment類

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

在onCreatView()方法中加載瞭我們剛剛創建的佈局
這樣就把新聞內容的Fragment和佈局創建好瞭,但是它們都是在雙頁模式當中使用的,如果想在單頁模式中使用,我們還需要創建一個Activity
創建一個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>

在這個地方發揮瞭代碼的復用性,直接在佈局中引入瞭NewsContentFragment.這樣相當於把news_content_frag佈局的內容自動加瞭進來
修改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")//獲取傳入的新聞標題
        val content = intent.getStringExtra("news content")//獲取傳入的新聞內容
        if (title != null && content!= null) {
            val fragment = newsContentFrag as NewsContentFragment
            fragment.refresh(title, content) //刷新NewsContentFragment 界面
        }
    }
}

onCreate()方法當中,我們通過Intent獲取到瞭傳入的新聞標題和新聞內容,然後獲取NewsContentFragment實例,接著調用它的refres()方法,將新聞標題和內容傳入,就可以把這些數據顯示出來瞭
接下來創建一個用於顯示新聞列表的佈局,新建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>

該佈局比較簡單,裡面隻有一個用於顯示新聞列表的RecyclerView,既然要用到RecyclerView就要編寫子項的佈局,新建news_item.xml作為RecyclerView子項的佈局

<?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>

子項佈局也比較簡單,隻有一個TextView
其中android:padding表示給空間周圍加上補白,這樣不至於讓文本內容,緊靠在邊緣上
android:ellipsize用於設定當文本內容超出控件寬度時的縮略方式,這裡指定成為end表示在尾部進行省略
新聞列表和子佈局都創建好瞭,現在需要一個用於展示新聞列表的地方,這裡新建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中能否找到一個id為newsContentLayout的View,來判斷當前是雙頁模式還是單頁模式
因此我們需要讓這個id為newsContentLayout的View旨在雙頁模式當中才會出現.
使用限定符實現id為newsContentLayout的View隻在雙頁模式當中才能出現.
修改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>

上述代碼表示隻會在單頁模式下加載一個新聞標題的Fragment
然後新建一個layout-sw600dp文件夾,在這個文件夾下面創建一個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>

可以看出在雙頁模式下面,同時引入瞭兩個fragment,並將新聞內容的fragment放在瞭Fragment的佈局下面,這個Fragment佈局id為newsContentFrag
因此隻要能夠找到這個佈局的id就說明是雙頁模式,反之來說就是單頁模式.
接下來就是在NewsTitleFragment中通過RecyclerView將新聞列表展示出來
在NewsTitleFragment中新建一個內部類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()
    }
    /**
     * 內部類,用來作為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當中先獲取news實例
                val news = newsList[holder.adapterPosition]
                //根據isTwoPane判斷是單頁模式還是雙頁模式
                if (isTwoPane) {
                    //如果是雙頁模式,則刷新newsContentFragment中的內容
                    val fragment = newsContentFrag as NewsContentFragment
                    fragment.refresh(news.title, news.content)
                } else {
                    //如果是單頁模式,則直接啟動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
        }
    }
}

最後一步收尾工作,向RecyclerView當中添加數據
修改NewsTitleFragment中的代碼

到此這篇關於Android實現基本功能的新聞應用的文章就介紹到這瞭,更多相關Android新聞應用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

Android實現基本功能的新聞應用

推薦閱讀：

發佈留言取消回覆

近期文章

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆