Android實現基本功能的新聞應用
先準備好一個新聞實體類
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()方法中加載了我們剛剛創(chuàng)建的布局
- 這樣就把新聞內容的Fragment和布局創(chuàng)建好了,但是它們都是在雙頁模式當中使用的,如果想在單頁模式中使用,我們還需要創(chuàng)建一個Activity
- 創(chuàng)建一個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>
- 在這個地方發(fā)揮了代碼的復用性,直接在布局中引入了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()方法,將新聞標題和內容傳入,就可以把這些數據顯示出來了
- 接下來創(chuàng)建一個用于顯示新聞列表的布局,新建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表示在尾部進行省略
- 新聞列表和子布局都創(chuàng)建好了,現在需要一個用于展示新聞列表的地方,這里新建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文件夾,在這個文件夾下面創(chuàng)建一個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新聞應用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
TabLayout關聯ViewPager后不顯示文字的解決方法
這篇文章主要為大家詳細介紹了TabLayout關聯ViewPager后不顯示文字的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11
Android編程之絕對布局AbsoluteLayout和相對布局RelativeLayout實例詳解
這篇文章主要介紹了Android編程之絕對布局AbsoluteLayout和相對布局RelativeLayout實現方法,結合實例形式詳細分析了Android絕對布局AbsoluteLayout和相對布局RelativeLayout的原理與使用技巧,需要的朋友可以參考下2015-12-12
Android 5.0中CoordinatorLayout的使用技巧
這篇文章主要為大家詳細介紹了Android 5.0中CoordinatorLayout的使用技巧,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09
解決Android studio 3.6.1 出現Cause: unable to find valid certifi
這篇文章主要介紹了Android studio 3.6.1 出現Cause: unable to find valid certification path to requested target 報錯的問題及解決方法,需要的朋友可以參考下2020-03-03
Android開發(fā)使用json實現服務器與客戶端數據的交互功能示例
這篇文章主要介紹了Android開發(fā)使用json實現服務器與客戶端數據的交互功能,結合具體實例形式分析了Android使用json格式數據在服務器與客戶端傳遞實現數據庫查詢功能的步驟與相關操作技巧,需要的朋友可以參考下2017-10-10

