使用Fragment,寬度限定符 實現新聞列表,手機平板適配————第一行代碼

展示
手機界面

在這裏插入圖片描述

平板界面

在這裏插入圖片描述

例子下載

https://download.csdn.net/download/ljp345775/12478162

實現的思路

  1. 是要準備兩個Fragment,一個是TitleFragment,用來展示新聞列表的,另外一個是ContentFragment,似乎用來展示新聞詳情的。
  2. 是要準備兩個佈局,一個是手機的佈局,裏面就放一個TitleFragment,然後用戶點擊列表的item,然後實現跳轉到新聞詳情界面,另外一個是平板的佈局,由於平板的屏幕比較大,所以,新聞列表和詳情在同意界面,然後根據用戶點擊列表的item,實現詳情界面修改數據,但是需要在res文件夾下新建一個名字爲:layout-sw600dp 的文件夾用來存放平板的佈局,如下圖所示:
在這裏插入圖片描述

  3. 要在用戶點擊item的時候 判斷是 手機 還是 平板,如果是 手機 就跳轉,如果是 平板,就刷新數據,在Kotlin中實現的思路就是 因爲程序會根據是 手機或者平板來加載不同的佈局,也就是說 如果是手機,就會加載layout文件夾下的activity_main.xml,如果是平板的話,就會加載layout-sw600dp文件夾的activity_main.xml ,所以,我們就可以判斷佈局文件中是否包含新聞詳情界面來判斷是手機韓式平板了。如下圖:
在這裏插入圖片描述

代碼
新聞列表 NewsTitleFragment
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 com.example.kotlindemo3.MainActivity
import com.example.kotlindemo3.NewsContentActivity
import com.example.kotlindemo3.R
import com.example.kotlindemo3.beans.News
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.fragment_newstitle.*

/**
 * @作者: ljp
 * @時間: 2020/5/30 14:46
 * @描述:用來展示新聞列表
 **/
class NewsTitleFragment : Fragment() {
    //頁面上是否有兩個fragment
    //用來判斷是手機 韓式平板
    var isTwo = false

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_newstitle, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        //通過判斷佈局中是否包含新聞詳情界面來判斷 是否爲平板
        isTwo = activity?.findViewById<View>(R.id.newsContentFrag) != null
        val list = getNews()
        val adapter = NewsAdapter(list)
        val manager = LinearLayoutManager(activity)
        recyc_titles.layoutManager = manager
        recyc_titles.adapter = adapter
        if (isTwo) {
            //如果是平板 詳情界面默認顯示第一條數據
            var news = list[0]
            val fragment = newsContentFrag as NewsContentFragment
            fragment.refresh(news.title, news.content)
            (activity as MainActivity).supportActionBar?.title = "平板"
        } else {
            (activity as MainActivity).supportActionBar?.title = "手機"
        }
    }
    /**
     * 內部類 RecyclerView 的適配器
     */
    inner class NewsAdapter(val list: ArrayList<News>) :
        RecyclerView.Adapter<NewsAdapter.VH>() {
        inner class VH(view: View) : RecyclerView.ViewHolder(view) {
            val tv_title_item_recyc: TextView = view.findViewById(R.id.tv_title_item_recyc)
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): VH {
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.item_recyc, parent, false)
            val vh = VH(view)
            //給item設置點擊事件
            vh.itemView.setOnClickListener {
                var adapterPosition = vh.adapterPosition
                var news = list[adapterPosition]
                //判斷是否爲平板,如果是,就展示詳情
                if (isTwo) {
                    val fragment = newsContentFrag as NewsContentFragment
                    fragment.refresh(news.title, news.content)
                } else {
                    //如果爲手機,就跳轉到詳情界面
                    NewsContentActivity.startAction(parent.context, news.title, news.content)
                }
            }
            return vh
        }

        override fun getItemCount() = list.size

        override fun onBindViewHolder(holder: VH, position: Int) {
            var news = list[position]
            holder.tv_title_item_recyc.text = news.title
        }

    }
    private fun getNews(): ArrayList<News> {
        val list = ArrayList<News>()

        for (i in 1..50) {
            val news = News("這是標題 $i", getRandomString("這是新聞內容 $i"))
            list.add(news)
        }
        return list
    }

    private fun getRandomString(str: String): String {
        val r = (1..30).random()
        val b = StringBuilder()
        repeat(r) {
            b.append(str)
        }
        return b.toString()
    }
}
新聞詳情 NewsContentFragment(用於平板)
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.kotlindemo3.R
import kotlinx.android.synthetic.main.fragment_newscontent.*

/**
 * @作者: ljp
 * @時間: 2020/5/30 15:15
 * @描述:新聞詳情界面
 **/
class NewsContentFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_newscontent, container, false)
    }

    //把數據展示到頁面上
    fun refresh(title: String, content: String) {
        tv_title_contentfrag.text = title
        tv_content_contetnfrag.text = content
    }

}
新聞詳情 NewsContentActicity(用於手機)
import android.content.Context
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.kotlindemo3.fragment.NewsContentFragment
import kotlinx.android.synthetic.main.activity_news_content.*

class NewsContentActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_news_content)
        getDataFromPre()
    }

    private fun getDataFromPre() {
        var title = intent.getStringExtra("title")
        var content = intent.getStringExtra("content")
        if (title != null && content != null) {
            val fragment = frag_newscontent as NewsContentFragment
            fragment.refresh(title, content)
        }
    }

    companion object {
        fun startAction(context: Context, title: String, content: String) {
            val intent = Intent(context, NewsContentActivity::class.java).apply {
                putExtra("title", title)
                putExtra("content", content)
            }
            context.startActivity(intent)

        }
    }

}

layout 文件夾下的activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/newsTitleFrag"
        android:name="com.example.kotlindemo3.fragment.NewsTitleFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
layout-sw600dp 文件夾下的activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/newsTitleFrag"
        android:name="com.example.kotlindemo3.fragment.NewsTitleFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="2dp"
        android:background="#000" />

    <fragment
        android:id="@+id/newsContentFrag"
        android:name="com.example.kotlindemo3.fragment.NewsContentFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章