5.5--Fragment 的最佳实践：一个简易版的新闻应用

最新推荐文章于 2024-03-26 09:56:15 发布

csdn_DaShuiNiu

最新推荐文章于 2024-03-26 09:56:15 发布

阅读量1.7k

点赞数 4

分类专栏： Kotlin第一行代码

本文链接：https://blog.csdn.net/CSDN_DaShuiNiu/article/details/106089476

版权

Kotlin第一行代码专栏收录该内容

84 篇文章 9 订阅

订阅专栏

Fragment 很多时候是在平板开发当中使用的，因为它可以解决屏幕控件不能充分利用的问题。那是不是就表明，我们开发的程序都需要提供一个手机版和一个平板版的呢？确实有不少公司是这么做的，但是这样会消耗很多人力物力财力。因为维护两个版本的代码成本很高；每当增加新功能时，需要在两份代码里面各写一遍；每当发现一个bug 时，需要在两份代码里面各修改一次。因此，今天我们最佳实践的内容就是叫你如何编写兼容手机和平板的应用程序。

新建好一个FragmentBestPractice 项目，准备开始动手。之前我们说了这是一个新闻项目，所以一定会有列表的运用，我们在依赖库中加入RecyclerView 的依赖。

然后我们准备好新闻的实体类News：


/**
 * 新闻实体类
 * @param title 标题
 * @param 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="#000" />

        <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="#000"
        />
</RelativeLayout>

默认占位隐藏内容布局，当我们点击要打开某个新闻的时候才会显示，可以看出这是为了双页平板设计的。

加下来创建NewsContentFragment 类来加载 news_content_frag.xml布局文件：

class NewsContentFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.news_content_frag,container,false)
    }
    // 刷新显示内容
    fun refresh(title:String,content:String){
        contentLayout.visibility = View.VISIBLE
        newsTitle.text = title // 刷新新闻标题
        newsContent.text = content // 刷新新闻内容
    }
}

这样我们就把新闻内容的Fragment 和布局都创建好了。但是我们创建的是双页面使用的，如果想再单页面使用的话，还需要再创建一个Activity。新建一个NewsContentActivity，然后我们来编辑布局文件：

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

</LinearLayout>

可以看到我们这个Activity 中直接复用了上面创建的NewsContentFragment，然后我们继续编写NewsContentActivity 中的代码：

class NewsContentActivity : AppCompatActivity() {

    companion object{
        fun actionStart(context: Context,title:String,content:String){
            val intent:Intent = Intent(context,NewsContentActivity::class.java)
            intent.putExtra("news_title",title)
            intent.putExtra("news_content",content)
            context.startActivity(intent)
        }
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_news_content)
        intent?.let {
            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 界面
            }
        }
    }
}

接下来我们还需要创建一个用于显示新闻列表的布局，新建new_title_frag.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/newsTitleRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

然后我们为这个列表创建子项布局文件 news_item.xml：

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

android:ellipsize = "end" 超出部分的文字在结尾使用省略符代替

可以看到只有一个TextView 因为只是一个单纯的新闻标题列表而以。

既然新闻列表和子布局都创建好了，那么接下来就需要一个用于展示新闻列表的地方。新建NewsTitleFragment：

class NewsTitleFragment :Fragment() {
    private var isTwoPane = false
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.new_title_frag,container,false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        // 判断 R.id.newsContentLayout 是否能找到，找到了代表是双页模式，这个id 只有双页才会出现。
        isTwoPane = activity?.findViewById<View>(R.id.newsContentLayout) != null
    }
}

我们判断了单双页得知上面的是为了双页展示写的，但是我们整个项目是为了兼容单页和双页所准备的，所以我们需要最起码两个activity_main.xml 文件，一个是单页的也就是默认的，另一个是为了兼容双页准备的也就是我们上面学的最小宽度限定符接下来我们创建一个layout-sw600dp 文件夹，在这个文件夹内部创建activity_main.xml 布局文件，并且修改默认的activity_main.xml 布局文件：

layout 下的activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/newsTitleLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</FrameLayout>

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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/newsTitleFrag"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:name="com.example.fragmentbestpractice.NewsTitleFragment"
        />
    <FrameLayout
        android:id="@+id/newsContentLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        >
        <fragment
            android:id="@+id/newsContentFrag"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:name="com.example.fragmentbestpractice.NewsContentFragment"
            />
    </FrameLayout>

</LinearLayout>

可以看出来大概的逻辑了吧，单页加载一个纵向新闻列表，双页左边新闻列表右面是内容。下面我们来为新闻列表的RecyclerView 添加适配器吧：

class NewsTitleFragment :Fragment() {
    private var isTwoPane = false
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.new_title_frag,container,false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        // 判断 R.id.newsContentLayout 是否能找到，找到了代表是双页模式，这个id 只有双页才会出现。
        isTwoPane = activity?.findViewById<View>(R.id.newsContentLayout) != null
        newsTitleRecyclerView.layoutManager = LinearLayoutManager(activity)
        newsTitleRecyclerView.adapter = NewsAdapter(getNews())
    }

    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()
    }

    inner class NewsAdapter(val newsList:List<News>) : RecyclerView.Adapter<NewsAdapter.ViewHolder>(){
        inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
            val newsTitle:TextView = view.findViewById(R.id.newsTitle)
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NewsAdapter.ViewHolder {
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.news_item, parent, false)
            val viewHolder = ViewHolder(view)
            viewHolder.itemView.setOnClickListener {
                val news = newsList[viewHolder.adapterPosition]
                if (isTwoPane){
                    // 如果是双页模式，刷新NewsContentFragment 中的内容
                    val newsContentFragment = newsContentFrag as NewsContentFragment
                    newsContentFragment.refresh(news.title,news.content)
                }else{
                    // 如果是单页模式，这直接启动NewsContentActivity
                    NewsContentActivity.actionStart(parent.context,news.title,news.content)
                }
            }
            return viewHolder
        }

        override fun getItemCount(): Int = newsList.size

        override fun onBindViewHolder(holder: NewsAdapter.ViewHolder, position: Int) {
            val news = newsList[position]
            holder.newsTitle.text = news.title
        }

    }
}

这样就可以运行项目了，其实逻辑很简单的，逻辑代码用的都是同一个Fragment 类，只是在布局上有一些不相同而以。

csdn_DaShuiNiu

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
5.5--Fragment 的最佳实践：一个简易版的新闻应用

Fragment 很多时候是在平板开发当中使用的，因为它可以解决屏幕控件不能充分利用的问题。那是不是就表明，我们开发的程序都需要提供一个手机版和一个平板版的呢？确实有不少公司是这么做的，但是这样会消耗很多人力物力财力。因为维护两个版本的代码成本很高；每当增加新功能时，需要在两份代码里面各写一遍；每当发现一个bug 时，需要在两份代码里面各修改一次。因此，今天我们最佳实践的内容就是叫你如何编写兼容手机和平板的应用程序。新建好一个FragmentBestPractice 项目，准备开始动手。之前我们说了这是
复制链接

扫一扫

专栏目录