美文网首页
Instance_NewsListOnDifferenceScr

Instance_NewsListOnDifferenceScr

作者: 勤学奋进小郎君 | 来源:发表于2018-09-23 20:02 被阅读0次

    主题:新闻展示(平板/手机)

    明确思路

    • 当打开手机模拟器时:出现新闻列表,列表只展示标题,点击后可以进入展示完整新闻内容的界面
    • 当打开平板电脑模拟器时:左边是新闻列表,列表展示标题,右边很大区域出现新闻内容,点击列表的标题,刷新右边碎片布局的内容
      确定流程,先从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.xmllayout/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;
        }
    

    相关文章

      网友评论

          本文标题:Instance_NewsListOnDifferenceScr

          本文链接:https://www.haomeiwen.com/subject/atzwnftx.html