Fragment（碎片）实用案例

碎片很多时候都是在平板开发使用，但是这样开发手机版的程序就得多写一份代码，今天就来解决这个问题，一份代码同时兼容手机与平板。

先看效果图，了解应用效果。







大概了解了，开始我们的编码

首先我们先准备一个新闻实体类，新建类News。

public class News {

	private String title;
	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;
	}
	private String content;
	
}

接着新建一个news_item.xml布局，作为新闻列表中子项的布局

<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>

附两个属性：

android:singleLine="true"，只能允许TextView显示单行，

<pre name="code" class="html">android:ellipsize="end"，指定内容超出部分在尾部进行缩略

创建NewsAdapter，作为新闻列表的适配器

public class NewsAdapter extends ArrayAdapter<News>{

	private int resourceId;
	public NewsAdapter(Context context, int textViewresourceId, List<News> objects) {
		super(context, textViewresourceId, objects);
		// TODO Auto-generated constructor stub
		resourceId=textViewresourceId;
	}
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		
		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;
		
	}

}

新建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:background="#ff000000"/>
        <TextView 
            android:id="@+id/news_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:padding="15dp"
            android:textSize="18dp"/>
    </LinearLayout>
    <ImageView android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:scaleType="fitXY"
        android:background="#ff000000"/>

</RelativeLayout>

再建一个NewsContentFragment类，继承Fragment

public class NewsContentFragment extends Fragment{

	private View view;
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		view=inflater.inflate(R.layout.news_contends_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);//刷新新闻内容
		
	}
}

新建news_content_frag.xml文件

<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.newshowdemo.NewsContentFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

新建News_ContentActivity,作为新闻内容的活动

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) {
		// TODO Auto-generated method stub
		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 newsContendFragment=(NewsContentFragment) getFragmentManager().
				findFragmentById(R.id.news_content_fragment);
		newsContendFragment.refresh(newsTitle, newsContent);
		//刷新newsContenFragment界面
	}
}

新建news_title_frag.xml,作为新闻列表布局

<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>

新建一个NewsTitleFragment类，作为标题栏碎片

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) {
		// TODO Auto-generated method stub
		super.onAttach(activity);
		newsList=getNews();//初始化新闻
		adapter=new NewsAdapter(activity,R.layout.new_item,newsList);
	}
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		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) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		if(getActivity().findViewById(R.id.news_content_layout)!=null)
		{
			isTwoPane=true;//可以找到news_content_layout布局为双页模式
		}
		else{
			isTwoPane=false;//找不到news_content_layout布局为单页模式
		}
	}
	
	@Override
	public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
		// TODO Auto-generated method stub
		News news=newsList.get(position);
		if(isTwoPane)
		{
			//如果是双页模式,则刷新NewsContentFragment中的内容
			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("要写好新闻，事先就要想好文章的中心思想写什么");
		news1.setContent("主题这个词，来自于德国，最早它是一个音乐术语，表达的是乐曲中的主要旋律。后来又被借用到文艺创作和文章的写作中。日本从德语中将其翻译过来，称为主题。我国现在使用的“主题”这个词，是从日本引进的。    一篇消息写什么内容，要先把意思想明白，这就是立意。立意就是确立主题。唐朝诗人杜牧说“文以意为主”，明末清初的思想家王夫之说“意犹帅也”，都说明“意”是作品的灵魂和主脑。写新闻也是这个道理，由于新闻作品是对现实生活的反映，作者总是通过对新闻事实的表达来说明某个问题或表明自己的态度和看法，任何新闻作品都不可能没有主题。有了主题才有明确的方向");
		newsList.add(news1);
		News news2=new News();
		news2.setTitle("主题从哪里来呢?它不是从天上掉下来的？");
		news2.setContent("当年在国内部当记者时，曾写过一篇《“一厘钱”精神》的通讯。开始他们只是看到北京墨水厂重视节约，在瓶盖上也力争节约一厘钱。于是想把类似的事写个《一厘钱》的集纳，后来，听说各地种种浪费或占用国家财产的思想同爱护国家财产的思想，矛盾相当突出，全国要开展增产节约运动(这时又了解到北京墨水厂是把节约一厘钱当作增产节约的口号提出的)。于是，他们对节约“一厘钱”这件事的看法改变了。");
		newsList.add(news2);
		
		return newsList;
	}

}

修改activity_main.xml布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.newshowdemo.MainActivity" >

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

</LinearLayout>

在res中新建layout-sw600dp文件夹，在这个文件夹下新建一个activity_main.xml文件，如果屏幕大于限定，会启动的这个文件，如果没有超过，就启动layout文件夹里的activity_main.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"
     >
    <fragment 
        android:id="@+id/news_title_fragment"
        android:name="com.example.newshowdemo.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.newshowdemo.NewsContentFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

</LinearLayout>

最后修改一下MainActivity这个类

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
	}

}

代码到这里就结束了。