欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建

程序员文章站 2024-03-22 18:21:28
...
前言:     
最近自己在业余时间在网上学习“”磨砺新闻“”项目,花了3周左右跟着把项目做完了,所以趁着热度赶紧先mark下项目的过程,与大家分享下。 顺便给磨砺营打个广告(喝水不忘挖井人),大家对app安卓新闻项目有兴趣的可以进去网站学习下:点击打开链接--------------------------------------------------
  好了,接下来给大家讲下项目简介。  先不多说,先上图,来看看最后运行后的效果:
一.项目简介
大概的功能就是能实现类似网易新闻客户端那样的的界面,有各种分类的新闻,点击可以跳转到新闻页面,下拉可以刷新新闻。具体的细节功能后续会一 一介绍。
二.界面的搭建
1)修改app名称和图标

 文件夹在manifests->Androidmanifests.xml


<application
        android:allowBackup="true"
        android:icon="@mipmap/kuaibo"
        android:label="@string/app_name"

2)设置无标题样式

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

3)闪屏页

public class SplashActivity extends Activity{
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {

                Intent intent=new Intent(SplashActivity.this,MainActivity.class);
                startActivity(intent);
                finish();

            }
        },3000);
    }
}

           布局文件:

<?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:background="@drawable/start">

</LinearLayout>

!!!在这里需要有个注意的地方,需要在Androidmanifests.xml把启动文件改到闪屏页的activity里,如图

<activity android:name=".View.MainActivity" />
        <activity android:name=".View.SplashActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

 分析:程序都比较简单,打开app时有个闪屏页(加载的图片在xml里),出现3秒左右后跳转到main.activity.

3)主标题栏和顶部选项标题实现   

1.添加依赖和布局文件

标题通过toolbar实现,顶部标题选项栏通过tablayout实现,tablayout在使用前先添加依赖。 添加依赖方法就不说了,直接上图,在相应的菜单中搜索如下图“”design“”里的包并添加。

安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建

      安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建


   接下来在main.xml里写他们的布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.hongaer.molinews.View.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@color/colorPrimary"
        android:logo="@mipmap/ic_launcher">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textSize="20sp"
            android:textColor="#ffffff" />

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>






</LinearLayout>

2.初始化数据

 private void initData() {
        mList_title= getResources().getStringArray(R.array.tab_title);

       mFirstFragments=new ArrayList<>();


        //通过标题个数来创建fragmen;

        for (int i=0;i<mList_title.length;i++){
            FirstpageFragment first=new FirstpageFragment();
            mFirstFragments.add(first);
        }

    }

  mlist_title 获取的是在sting.xml里定义的标题数组布局文件布局文件如下:

<array name="tab_title">
        <item>新闻</item>
        <item>财经</item>
        <item>体育</item>
        <item>军事</item>
        <item>科技</item>
        <item>历史</item>
        <item>凤凰要闻</item>

    </array>

 后面的功能主要是根据标题数来创建fragment,并把这些fragment都放在集合mFirstFragments里。这些我理解为是tablayout的数据源,有了数据接下来需要写适配器   


 3.设置tablayout适配器

话不多说,直接贴代码:

package com.example.hongaer.molinews.Adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.hongaer.molinews.Fragment.FirstpageFragment;

import java.util.List;

/**
 * tablayout 的适配器
 */

public class MainTabAdapter extends FragmentPagerAdapter {

    private   List<FirstpageFragment> mList_fragment;
    private   String[] mList_title;


    public MainTabAdapter(FragmentManager fm,List<FirstpageFragment> list_fragment,String[] list_title) {
        super(fm);
        mList_fragment= list_fragment;
        mList_title=list_title;
    }

    @Override
    //通过position返回要显示的fragment
    public Fragment getItem(int position) {
        return mList_fragment.get(position);
    }

    @Override
    //返回总滑动的fragment总数
    public int getCount() {
        return mList_fragment.size();

    }
    //根据不同的位置返回不同的标题
    public CharSequence getPageTitle(int position){

       return  mList_title[position];
     }

}

 这部分代码主要是实现tablayout的适配器   ,里面有一个本类的构造方法和3个重写实现抽象类的方法。大体的功能注释都有写,就不多说,主要说下构造方法里的三个参数,第一个fm是管理fragment的参数,第二个是之前说的存储fragment的集合,第三储存标题的数组。

4.初始化布局,关联适配器

还是老规矩,先上代码:

private void initView() {
        mTablayout= (TabLayout) findViewById(R.id.tab_title);
        mViewpager= (ViewPager) findViewById(R.id.view_pager);

        mAdapter_title=new MainTabAdapter(getSupportFragmentManager(),mFirstFragments,mList_title);//设置适配器,即将数据源与适配器绑定
       mViewpager.setAdapter(mAdapter_title);//关联适配器,即将适配器设置到view上

      //  TabLayout 绑定viewpager


       mTablayout.setupWithViewPager(mViewpager);



    }

此代码也在main.activity中,主要功能注释也写了,就简单讲讲。也就是把前面的数据先与适配器绑定,然后把适配器设置加载到要显示的相应listview,在这里即viewpager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。然后在切换的屏幕之前用fragment来填充。  最后为了实现屏幕跟着标题tablayout来切换,需要最后把他们绑定,即11//代码所写。  最后把此部分代码的运行效果显示下   ps:因为之前做的忘了保存,只能用磨砺视频里的效果,都差不多--!


安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建

!!!最后在补充一点,就是在主函数里一定要先初始化数据然后在初始化布局,要不然运行后模拟器报错。因为没有数据怎么能提供给适配器来显示呢。所以这个一定要注意 

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Fresco.initialize(this);


        initData();
        initView();

      今天就先写到这吧,后续的继续分享~欢迎各种大牛指点和吐槽~~














安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建

安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建

安卓仿手机网易新闻app项目开发系列之(一)项目简介和 界面搭建