做一个简易的新闻应用APP

bill

由于刚学习了安卓的碎片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相对应。

bill

详细步骤：
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"
    androidrientation="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"
        androidrientation="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);
   }
}

bill

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"
    androidrientation="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"
    androidrientation="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;
   }

}

bill

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

}

bill

bill

上图：APK在安卓手机上运行，标准的小屏幕，只显示新闻标题

点击标题则跳转到相应界面，同样的一份代码,在手机和平板（大屏幕）运行却分别是两种完全不同的效果，
程序兼容性有了一定的体现。

蓝天-彭

bill 发表于 2016-5-31 18:02
上图：APK在安卓手机上运行，标准的小屏幕，只显示新闻标题

点击标题则跳转到相应界面，同样的一份代码, ...

不错不错