我们来写一个简易版的新闻应用。这章使用 Kotlin 编写。实现在不同设备运行下展示不同效果
手机上运行时，点击标题打开新页面展示内容
平板运行时，点击标题，直接在右侧展示
1、MainActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
其中 activity_main 我们准备两个布局。分别在手机和平板上展示
下面这段代码表示在单页模式下只会加载一个新闻标题的 Fragment
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/newsTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="@+id/newsTitleFrag"
android:name="com.xx.kotlinapplication.NewsTitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
接着创建一个 layout-sw600dp 文件夹，新建 activity_main.xml，双页模式下我们引入两个 Fragment，将新闻内容放在了 id 为 newsContentLayout 的布局下。因此找到这个 id 就是双页模式，否则就是单页。双页模式下左边放置新闻标题，右边放置新闻内容
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/newsTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<fragment
android:id="@+id/newsTitleFrag"
android:name="com.xx.kotlinapplication.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.xx.kotlinapplication.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
2、创建显示新闻列表的布局 news_title_frag
<?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 所以在 build.gradle 中需要引入依赖
implementation 'androidx.recyclerview:recyclerview:1.1.0'
3、创建 RecyclerView 的子项布局 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"/>
4、创建展示新闻列表的 NewTitleFragment
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
}
}
上边步骤中通过在 Activity 中是否能找到一个 contentLayout 的 View 来判断当前是双页模式还是单页模式
5、新建一个显示新闻内容的 NewsContentActivity，使用默认布局 activity_news_content.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">
<fragment
android:id="@+id/newsContentFrag"
android:name="com.xx.kotlinapplication.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
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)
}
}
}
记得在 AndroidManifest 中注册 NewsContentActivity
6、新建新闻内容布局 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/newTitle"
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>
7、新建 NewsContentFragment 类
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
newTitle.text = title
newsContent.text = content
}
}
8、新建新闻实体类 News
class News(val title:String,val content:String)
9、创建 NewsAdapter 作为 RecyclerView 的适配器，同时填充数据
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.contentLayout) != 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()
}
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): ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.news_item,parent,false)
val holder = ViewHolder(view)
holder.itemView.setOnClickListener {
val news = newsList[holder.adapterPosition]
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 getItemCount(): Int = newsList.size
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val news = newsList[position]
holder.newsTitle.text = news.title
}
}
}
