家庭记账本（二）记录界面显示

　　在上一篇博客中我们将记录页面初步搭建，但是如果运行的话，依然看不到界面。

　　首先我们需要创建一个ViewPager的适配器，命名为RecordPagerAdapter.java

public class RecordPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> fragmentList;
    String[] titles = {"支出", "收入"};

    public RecordPagerAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

　　

　　写一个初始化ViewPager的方法

private  void initPager() {
        /*初始化ViewPager页面的集合*/
        List<Fragment> fragmentList = new ArrayList<>();

        /*创建收入和支出页面放置在Fragment当中*/
        OutcomeFragment outcomeFragment = new OutcomeFragment();
        IncomeFragment incomeFragment = new IncomeFragment();

        fragmentList.add(outcomeFragment);
        fragmentList.add(incomeFragment);

        /*创建适配器*/
        RecordPagerAdapter recordPagerAdapter = new RecordPagerAdapter(getSupportFragmentManager(), fragmentList);
        /*设置适配器*/
        viewPager.setAdapter(recordPagerAdapter);

        /*将TabLayout和ViewPager进行关联*/
        tabLayout.setupWithViewPager(viewPager);
    }

　　在创建RecorfActivity时所需要的步骤：

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_record);

        /*查找控件*/
        tabLayout = findViewById(R.id.record_tabs);
        viewPager = findViewById(R.id.record_vp);
        /*设置viewPager*/
        initPager();
    }

　　此外，在记录页面中左上角存在一个叉号图片。我们所想要实现的功能是点击此叉号可以返回至主界面，所以在这个地方添加一个点击事件，实现可以返回主界面。

    /*点击事件*/
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.record_iv_back:
                finish();
                break;
        }
    }

　　现在，我们将目光放在需要实现支出与收入的两个fragment上，考虑到两个fragment有很多相同的地方，所以为了避免代码冗余，我们抽象出一个BaseRecordFragment类，编写两个fragment中一样的地方。

　　将fragment填充至view中。

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_outcome, container, false);

        initView(view);
        /*给GridView填充数据的方法*/
        loadDataToGV();
        /*设置GridView的每一项的点击事件*/
        setGridViewListener();
        /*初始化当前时间*/
        initTime();
        return view;
    }

　　这时，我们现将GridView中需要显示的数据加载出来。便于以后的更改，我们将这里的数据添加至数据库中。

　　我们新建一个DBOpenHelper类，继承SQLiteOpenHelper

public class DBOpenHelper extends SQLiteOpenHelper {
    public DBOpenHelper(@Nullable Context context) {
        super(context, "tally.db", null, 1);
    }

    /*创建数据库的方法
    * 只有项目第一次运行时会被调用*/
    @Override
    public void onCreate(SQLiteDatabase db) {
        String sql = "create table tb_type(id integer primary key autoincrement, " +
                "typename varchar(10)," +
                "imageId integer," +
                "sImageId integer," +
                "kind integer)";
        db.execSQL(sql);

        insertType(db);

        /*创建记账表*/
        String sql2 = "create table tb_account(id integer primary key autoincrement, " +
                "typename varchar(10), " +
                "sImageId integer, " +
                "mark varchar(80), " +
                "money float, " +
                "time varchar(60), " +
                "year integer, " +
                "month integer, " +
                "day integer, " +
                "kind integer) ";
        db.execSQL(sql2);
    }

    /**
     * 数据库版本在更新时发生改变，会调用此方法*/
    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

    }

    public void insertType(SQLiteDatabase db) {
        //向tb_type表中插入元素
        String sql = "insert into tb_type(typename, imageId, sImageId, kind) values(?,?,?,?)";
        db.execSQL(sql, new Object[]{"其它", R.mipmap.ic_other, R.mipmap.ic_other, 0});
        db.execSQL(sql, new Object[]{"餐饮", R.mipmap.ic_catering, R.mipmap.ic_catering_selected, 0});
        db.execSQL(sql, new Object[]{"日用", R.mipmap.ic_daily, R.mipmap.ic_daily_selected, 0});
        db.execSQL(sql, new Object[]{"水果", R.mipmap.ic_fruit, R.mipmap.ic_fruit_selected, 0});
        db.execSQL(sql, new Object[]{"娱乐", R.mipmap.ic_recreation, R.mipmap.ic_recreation_selected, 0});
        db.execSQL(sql, new Object[]{"宠物", R.mipmap.ic_pet, R.mipmap.ic_pet_selected, 0});
        db.execSQL(sql, new Object[]{"学习", R.mipmap.ic_study, R.mipmap.ic_study_selected, 0});
        db.execSQL(sql, new Object[]{"交通", R.mipmap.ic_traffic, R.mipmap.ic_traffic_selected, 0});
        db.execSQL(sql, new Object[]{"医疗", R.mipmap.ic_medical, R.mipmap.ic_medical_selected, 0});

        db.execSQL(sql, new Object[]{"其它", R.mipmap.ic_other, R.mipmap.ic_other, 1});
        db.execSQL(sql, new Object[]{"工资", R.mipmap.ic_salary, R.mipmap.ic_salary_selected, 1});
        db.execSQL(sql, new Object[]{"兼职", R.mipmap.ic_part_time, R.mipmap.ic_part_time_selected, 1});
        db.execSQL(sql, new Object[]{"理财", R.mipmap.ic_transaction, R.mipmap.ic_transaction_selected, 1});
        db.execSQL(sql, new Object[]{"礼金", R.mipmap.ic_gift, R.mipmap.ic_gift_selected, 1});

    }
}

　　通过insertType方法将我们所需要的类型说明以及图片全部添加至数据库，用kind区分支出与收入， 0表示支出 1表示收入

　　

　　新建一个DBManager类用于操作数据库中的表。

 /**
     * 读取数据库当中的数据，写入内存集合里
     * kind:
     *  0 支出
     *  1 收入
     */

    public static List<TypeBean> getTypeList(int kind) {
        ArrayList<TypeBean> list = new ArrayList<>();
        String sql = "select * from tb_type where kind="+kind;
        Cursor cursor = db.rawQuery(sql, null);
        while(cursor.moveToNext()) {
            String typename = cursor.getString(cursor.getColumnIndex("typename"));
            int imageId = cursor.getInt(cursor.getColumnIndex("imageId"));
            int sImageId = cursor.getInt(cursor.getColumnIndex("sImageId"));
            int id = cursor.getInt(cursor.getColumnIndex("id"));

            TypeBean typeBean = new TypeBean(id, typename, imageId, sImageId, kind);
            list.add(typeBean);
        }
        return list;
    }

　　将需要的类别数据全部添加至数据库后，我们继续编写实现GridView

　　我们需要一个适配器

public class TypeBaseAdapter extends BaseAdapter {

    Context context;
    List<TypeBean> mDatas;
    int selectPos = 0;//选中的位置

    public TypeBaseAdapter(Context context, List<TypeBean> mDatas) {
        this.context = context;
        this.mDatas = mDatas;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public Object getItem(int position) {
        return mDatas.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    public void setSelectPos(int selectPos) {
        this.selectPos = selectPos;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = LayoutInflater.from(context).inflate(R.layout.item_recordfragment_gv, parent, false);

        /*查找布局当中的控件*/
        ImageView iv = convertView.findViewById(R.id.item_recordfrag_iv);
        TextView tv = convertView.findViewById(R.id.item_recordfrag_tv);

        /*获取指定位置的数据源*/
        TypeBean typeBean = mDatas.get(position);
        tv.setText(typeBean.getTypename());

        if (selectPos == position) {
            iv.setImageResource(typeBean.getsImageId());
        } else {
            iv.setImageResource(typeBean.getImageId());
        }
        return convertView;
    }
}

　　给GridView加载数据

    /*给GridView填充数据的方法*/
    public void loadDataToGV() {
        typeBeanList = new ArrayList<>();

        adapter = new TypeBaseAdapter(getContext(), typeBeanList);
        gv_type.setAdapter(adapter);

    }

　　这里所需要的数据，支出与收入并不相同，所以需要在两个fragment中重写这个方法。下面给出OutcomeFragment中重写的实现。

@Override
    public void loadDataToGV() {
        super.loadDataToGV();
        /* TODO:获取数据库当中的数据源 */
        List<TypeBean> inList = DBManager.getTypeList(1);
        typeBeanList.addAll(inList);
        adapter.notifyDataSetChanged();
    }

　　

　　在GridView中设置点击事件，保证我们点击不同的type可以更改type的类型

    /*设置GridView的点击事件*/
    private void setGridViewListener() {
        gv_type.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                adapter.setSelectPos(position);
                adapter.notifyDataSetInvalidated();

                imageView.setImageResource(typeBean.getImageId());
                tv_type.setText(typeBean.getTypename());

            }
        });
    }

　　初始化界面

public void initView(View view) {
        keyboardView = view.findViewById(R.id.frag_record_keyboard);
        et_money = view.findViewById(R.id.frag_record_et_money);
        imageView = view.findViewById(R.id.frag_record_iv);
        gv_type = view.findViewById(R.id.frag_record_gv);
        tv_mark = view.findViewById(R.id.frag_record_tv_mark);
        tv_time = view.findViewById(R.id.frag_record_tv_time);
        tv_type = view.findViewById(R.id.frag_record_tv_type);

        tv_time.setOnClickListener(this);
        tv_mark.setOnClickListener(this);

        //让自定义软键盘显示出来
        KeyboardUtils keyboard = new KeyboardUtils(keyboardView, et_money);
        keyboard.showKeyboard();

        /*设置接口，监听确定按钮被点击了*/
        keyboard.setOnEnsureListener(new KeyboardUtils.OnEnsureListener() {
            @Override
            public void onEnsure() {
                /*点击了确定按钮
                * 获取记录的信息保存在数据库当中
                * 返回上一级页面
                * */
            }
        });
    }

　　初始化时间

/*初始化时间*/
    public void initTime() {
        Date date = new Date();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");

        String time = simpleDateFormat.format(date);
        tv_time.setText(time);


    }

　　现在，记录界面已经可以显示了。下一步，我们将对记录界面进一步完善。