做一个简易的新闻应用APP
由于刚学习了安卓的碎片UI,参考《第一行代码》做一个简易的新闻应用。界面构思:
界面适配大屏小屏,
小屏幕只显示新闻标题列表,点击跳转到相应新闻内容,
大屏幕则使用两个碎片UI组合在一起,左边是新闻标题,右边是相应新闻内容。
步骤:
1.java文件:准备好一个新闻的实体类,新建类 News
2.布局文件:接着新建一个 news_item.xml 布局,用于作为新闻列表中子项的布局,放入了一个 TextView 用于显示新闻的标题、
3.java文件:创建新闻列表的适配器-------在 getView()方法中,我们获取到了相应位置上的 News 类,并让新闻的标题在列表中进行显示
4.布局文件(碎片):编写新闻内容部分的代码。新建布局文件 news_content_frag.xml。------头部显示完整的新闻标题,正文部分显示新闻内容,中间使用一条细线分隔开
5.java文件(碎片):再新建一个 NewsContentFragment 类,4和5相对应。
6.布局文件:创建一个在活动中使用的新闻内容布局,新建 news_content.xml,引入了 NewsContentFragment,相当于把 news_content_frag 布局的内容自动加了进来
7.java文件:新建 NewsContentActivity,作为显示新闻内容的活动,6和7相对应。
8.布局文件(碎片):再创建一个用于显示新闻列表的布局,新建 news_title_frag.xml-----里面只有一个 ListView,定义了一个新闻标题列表。
9.java文件(碎片):新建一个 NewsTitleFragment 类,8和9相对应
10.布局文件(layout----小屏幕):修改 activity_main.xml 中的代码,里面放入⑧,小屏幕只显示标题。
11.布局文件(layout-sw600dp----大屏幕)新建 layout-sw600dp文件夹,在这个文件夹下再新建一个 activity_main.xml 文件,里面同时引入了两个碎片4和8,大屏幕同时显示标题和内容。
12.最后再将 MainActivity 稍作修改,把标题栏去除掉。10,11与12相对应。
详细步骤:
1.准备好一个新闻的实体类,新建类 News,其中title 表示新闻标题,content 表示新闻内容
package com.example.fragmentbestpractice;
public class News {
private String title;
private String content;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
2.接着新建一个 news_item.xml 布局,用于作为新闻列表中子项的布局,放入了一个 TextView 用于显示新闻的标题
<?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" >
<TextView
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:textSize="18sp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
/>
</LinearLayout>
3.java文件:创建新闻列表的适配器-------因为数据不能直接在ListView中显示,需要使用到适配器传给ListView,
在 getView()方法中,我们获取到了相应位置上的 News 类,并让新闻的标题在列表中进行显示。
package com.example.fragmentbestpractice;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
public class NewsAdapter extends ArrayAdapter<News> {
private int resourceId;
public NewsAdapter(Context context, int textViewResourceId, List<News> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
News news = getItem(position);
View view;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
} else {
view = convertView;
}
TextView newsTitleText = (TextView) view.findViewById(R.id.news_title);
newsTitleText.setText(news.getTitle());
return view;
}
}
4.编写新闻内容部分的代码。新建布局文件 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/visibility_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible" >
<TextView
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textSize="20sp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:scaleType="fitXY"
android:src="@drawable/spilt_line" />
<TextView
android:id="@+id/news_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="15dp"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="@drawable/spilt_line_vertical" />
</RelativeLayout>
5.新建一个 NewsContentFragment 类,4和5相对应。通过 findViewById()方法分别获取到新闻的标题和内容控件
package com.example.fragmentbestpractice;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class NewsContentFragment extends Fragment {
private View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.news_content_frag, container, false);
return view;
}
public void refresh(String newsTitle, String newsContent) {
View visibilityLayout = view.findViewById(R.id.visibility_layout);
visibilityLayout.setVisibility(View.VISIBLE);
TextView newsTitleText = (TextView) view.findViewById(R.id.news_title);
TextView newsContentText = (TextView) view
.findViewById(R.id.news_content);
newsTitleText.setText(newsTitle);
newsContentText.setText(newsContent);
}
}
6.创建一个在活动中使用的新闻内容布局,新建 news_content.xml,引入了 NewsContentFragment,
相当于把 news_content_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" >
<fragment
android:id="@+id/news_content_fragment"
android:name="com.example.fragmentbestpractice.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
7.java文件:新建 NewsContentActivity,作为显示新闻内容的活动,6和7相对应。
package com.example.fragmentbestpractice;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
public class NewsContentActivity extends Activity {
public static void actionStart(Context context, String newsTitle,
String newsContent) {
Intent intent = new Intent(context, NewsContentActivity.class);
intent.putExtra("news_title", newsTitle);
intent.putExtra("news_content", newsContent);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.news_content);
String newsTitle = getIntent().getStringExtra("news_title");
String newsContent = getIntent().getStringExtra("news_content");
NewsContentFragment newsContentFragment = (NewsContentFragment) getFragmentManager().findFragmentById(R.id.news_content_fragment);
newsContentFragment.refresh(newsTitle, newsContent);
}
}
8.布局文件(碎片):再创建一个用于显示新闻列表的布局,新建 news_title_frag.xml-----里面只有一个 ListView,
定义了一个新闻标题列表。
<?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" >
<ListView
android:id="@+id/news_title_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
9.java文件(碎片):新建一个 NewsTitleFragment 类,8和9相对应,
这个类的代码有点长,根据碎片的生命周期,我们知道,onAttach()方法会首先执行,因此在这里做了一些数据初始化的操作,比如调用 getNews()方法获取几
条模拟的新闻数据,以及完成 NewsAdapter 的创建。然后在 onCreateView()方法中加载了news_title_frag 布局,
并给新闻列表的 ListView 注册了点击事件。接下来在 onActivityCreated()方法中,我们通过是否能够找到一个 id 为
news_content_layout 的 View 来判断当前是双页模式(大屏幕)还是单页模式(小屏幕),这个 id 为 news_content_layout
的 View 只在双页模式中才会出现,在稍后的布局里你将会看到。
然后在 ListView 的点击事件里我们就可以判断,如果当前是单页模式,就启动一个新的活动去显示新闻内容,如果当前是双页模式,就更新新闻内容碎
片里的数据。
package com.example.fragmentbestpractice;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
public class NewsTitleFragment extends Fragment implements OnItemClickListener {
private ListView newsTitleListView;
private List<News> newsList;
private NewsAdapter adapter;
private boolean isTwoPane;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
newsList = getNews();
adapter = new NewsAdapter(activity, R.layout.news_item, newsList);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater
.inflate(R.layout.news_title_frag, container, false);
newsTitleListView = (ListView) view
.findViewById(R.id.news_title_list_view);
newsTitleListView.setAdapter(adapter);
newsTitleListView.setOnItemClickListener(this);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if (getActivity().findViewById(R.id.news_content_layout) != null) {
isTwoPane = true;
} else {
isTwoPane = false;
}
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
News news = newsList.get(position);
if (isTwoPane) {
NewsContentFragment newsContentFragment = (NewsContentFragment) getFragmentManager()
.findFragmentById(R.id.news_content_fragment);
newsContentFragment.refresh(news.getTitle(), news.getContent());
} else {
NewsContentActivity.actionStart(getActivity(), news.getTitle(),
news.getContent());
}
}
private List<News> getNews() {
List<News> newsList = new ArrayList<News>();
News news1 = new News();
news1.setTitle("Succeed in College as a Learning Disabled Student");
news1.setContent("College freshmen will soon learn to live with a roommate, adjust to a new social scene and survive less-than-stellar dining hall food. Students with learning disabilities will face these transitions while also grappling with a few more hurdles.");
newsList.add(news1);
News news2 = new News();
news2.setTitle("Google Android exec poached by China's Xiaomi");
news2.setContent("China's Xiaomi has poached a key Google executive involved in the tech giant's Android phones, in a move seen as a coup for the rapidly growing Chinese smartphone maker.");
newsList.add(news2);
return newsList;
}
}
10.布局文件(layout----小屏幕):修改 activity_main.xml 中的代码,里面放入⑧,小屏幕只显示标题。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="@+id/news_title_fragment"
android:name="com.example.fragmentbestpractice.NewsTitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
11.布局文件(layout-sw600dp----大屏幕)新建 layout-sw600dp文件夹,在这个文件夹下再新建一个 activity_main.xml 文件,里面同时引入了两个碎片4和8,大屏幕同时显示标题和内容。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="@+id/news_title_fragment"
android:name="com.example.fragmentbestpractice.NewsTitleFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<FrameLayout
android:id="@+id/news_content_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" >
<fragment
android:id="@+id/news_content_fragment"
android:name="com.example.fragmentbestpractice.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>12.最后再将 MainActivity 稍作修改,把标题栏去除掉。10,11与12相对应。
package com.example.fragmentbestpractice;
import android.os.Bundle;
import android.view.Window;
import android.app.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);
}
}
上图:APK在安卓手机上运行,标准的小屏幕,只显示新闻标题
点击标题则跳转到相应界面,同样的一份代码,在手机和平板(大屏幕)运行却分别是两种完全不同的效果,
程序兼容性有了一定的体现。
bill 发表于 2016-5-31 18:02 static/image/common/back.gif
上图:APK在安卓手机上运行,标准的小屏幕,只显示新闻标题
点击标题则跳转到相应界面,同样的一份代码, ...
不错不错
页:
[1]