主题:新闻展示(平板/手机)
明确思路
- 当打开手机模拟器时:出现新闻列表,列表只展示标题,点击后可以进入展示完整新闻内容的界面
- 当打开平板电脑模拟器时:左边是新闻列表,列表展示标题,右边很大区域出现新闻内容,点击列表的标题,刷新右边碎片布局的内容
确定流程,先从aciticity显示开始,并且因为都有新闻列表,所以可以将列表做成碎片布局,两个模拟器使用相同代码。然后做一些准备工作:展示的新闻对象、新闻列表用到新闻类适配器
开始编写代码
1、需要很多条新闻(对象)展示,所以定义个统一的父类News
小技巧:定义好私有属性,然后Android Studio->code->Generate.->Getter and Setter
News.java
public class News {
private String NewsTitle;
private String NewsContent;
public News(String newsTitle, String newsContent) {
NewsTitle = newsTitle;
NewsContent = newsContent;
}
public void setNewsTitle(String newsTitle) {
NewsTitle = newsTitle;
}
public void setNewsContent(String newsContent) {
NewsContent = newsContent;
}
public String getNewsTitle() {
return NewsTitle;
}
public String getNewsContent() {
return NewsContent;
}
}
2、实现一个新闻列表碎片布局
frag_newstitle.xml
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/newslist">
</ListView>
3、实现视图列表子项的布局设计,为适配器准备
newslistitem.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/newsTitle"
android:ellipsize="end"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
4、定义一个新闻类的适配器
newsAdapter.java
public class newsAdapter extends ArrayAdapter<News> {
private int resourceId; //用于接收构造方法传入的资源id
public newsAdapter(Context context, int resource, List<News> news) {
super(context, resource);
resourceId = resource;
}
public View getView(int position, View convertView, ViewGroup parent) {
//根据光标所在的位置(类似于列表中的索引),获取(新闻)对象列表中的具体对象
News siglenew = getItem(position);
//将资源ID代表的布局模板填充进列表子项
View view = LayoutInflater.from(getContext()).inflate(resourceId, null);
//获取资源ID代表的布局模板的控件对象TextView
TextView title = (TextView)view.findViewById(R.id.newsTitle);
//用传入的新闻对象的标题内容,放进布局模板中
title.setText(siglenew.getNewsTitle());
//返回这个构造好的列表子项布局视图
return view;
}
}
5、创建一个展示新闻内容的布局文件
activity_newscontent.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/newstitleincontent"/>
<TextView
android:layout_width="match_parent"
android:id="@+id/newscontent"
android:layout_height="0dp"
android:layout_weight="1"/>
6、创建展示新闻内容的活动(和第一行代码里的实例略有不同)
activity_newscontent.java
public class activity_newscontent extends Activity {
//外部调用这个方法,将新闻对象的内容传递进来,然后开启活动显示
public static void actionStart(Context context, String title, String content){
Intent intent = new Intent(context, activity_newscontent.class);
intent.putExtra("title", title);
intent.putExtra("content", content);
context.startActivity(intent);
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_newscontent);
TextView title = (TextView)findViewById(R.id.newstitleincontent);
TextView content = (TextView)findViewById(R.id.newscontent);
title.setText(getIntent().getStringExtra("title"));
content.setText(getIntent().getStringExtra("content"));
}
}
7、该创建点击事件,然后传入新闻对象,展示数据。这个是一个碎片,它可以放进activity_main.xml文件布局中,直接加载进来
frag_newslist.java
public class frag_newslist extends Fragment {
private List<News> Newslist;
private newsAdapter newsadapter;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
Newslist = new ArrayList<News>();
News news1 = new News("First news tile","this is first news's content");
News news2 = new News("Second news tile","this is Second news's content");
Newslist.add(news1);
Newslist.add(news2);
newsadapter = new newsAdapter(activity, R.layout.newslistitem, Newslist);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
//引入新闻列表碎片布局,修改内容,然后填充到指定的位置
View view = inflater.inflate(R.layout.frag_newstitle, container, false);
ListView listView = (ListView)view.findViewById(R.id.newslist);
listView.setAdapter(newsadapter);
//监听列表视图的单个子视图的点击事件
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//获取当前列表子项的对象
News news = Newslist.get(i);
activity_newscontent.actionStart(getActivity(), news.getNewsTitle(), news.getNewsContent());
}
});
return view;
}
}
8、入口活动启动时,加载这个布局,就会加载碎片文件
activity_main.xml
<fragment
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="@+id/newstile"
android:name="com.example.pc_255992.news.frag_newslist">
</fragment>
10、去除边框
MainActivity.java
,这里必须继承Activity
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
}
11、新增一个文件夹layout-sw400dp/
,存放平板电脑布局文件
比手机版多了一个碎片,展示内容
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/newstile"
android:name="com.example.xiongchaochao.newslayout.frag_newslist">
</fragment>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:id="@+id/news_content_layout"
android:layout_weight="1">
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/news_content_fragment"
android:name="com.example.xiongchaochao.newslayout.frag_newscontent">
</fragment>
</FrameLayout>
</LinearLayout>
12、新闻列表展示,和layout/frag_newstitle.xml
是同一个文件,内容不变,还有列表视图的子视图也一样
frag_newstitle.xml
newslistitem.xml
13、layout-sw400dp/frag_newscontent.xml
和layout/activity_newscontent.xml
,只有文件名不一样,内容一致,其实写同一个文件名也行
frag_newscontent.xml
14、新闻列表碎片,修改了,多了一个点击事件的不同
frag_newslist.java
public class frag_newslist extends Fragment {
private List<News> Newslist;
private newsAdapter newsadapter;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
Newslist = new ArrayList<News>();
News news1 = new News("First news tile","this is first news's content");
News news2 = new News("Second news tile","this is Second news's content");
Newslist.add(news1);
Newslist.add(news2);
newsadapter = new newsAdapter(activity, R.layout.newslistitem, Newslist);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
//引入新闻列表碎片布局,修改内容,然后填充到指定的位置
View view = inflater.inflate(R.layout.frag_newstitle, container, false);
ListView listView = (ListView)view.findViewById(R.id.news_title_list_view);
listView.setAdapter(newsadapter);
//监听列表视图的单个子视图的点击事件
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//如果可以找到activity_newscontent布局文件,就表明在使用的是layout的布局
if(getActivity().findViewById(R.id.news_content_fragment) == null){
//获取当前列表子项的对象
News news = Newslist.get(i);
activity_newscontent.actionStart(getActivity(), news.getNewsTitle(), news.getNewsContent());
}else {
News news = Newslist.get(i);
//使用fragmentmanager来进行碎片间的信息传递
android.app.FragmentManager fragmentManager = getFragmentManager();
//获取news_content_fragment对应的fragment对象,也就是新闻内容碎片
frag_newscontent fragment = (frag_newscontent) fragmentManager.findFragmentById(R.id.news_content_fragment);
fragment.refresh(news.getNewsTitle(), news.getNewsContent());
}
}
});
return view;
}
}
15、多了一个碎片,就是在左边布局展示新闻内容
frag_newscontent
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag_newscontent, container, false);
return view;
}
public void refresh(String title, String content){
TextView newstitle = getActivity().findViewById(R.id.newstitleincontent);
newstitle.setText(title);
TextView newscontent = getActivity().findViewById(R.id.newscontent);
newscontent.setText(content);
}
}
实现效果
-
平板电脑
1.gif - 手机
遇到的问题:
- 没看懂actionStart方法所谓的方便之处何解?
- 界面是空的
[Answer] 主要没有将新闻列表对象传递进去
修改前:
public newsAdapter(Context context, int resource, List<News> news) {
super(context, resource);
resourceId = resource;
}
修改后:
public newsAdapter(Context context, int resource, List<News> news) {
super(context, resource, news);
resourceId = resource;
}
网友评论