"天天背单词"--的设计与实现(二)

加上广告之后百度就不让上了,客服说让我在线配置隐藏广告在上架,我可不是那种藏着掖着的人,哈哈,所以只能在云盘下载了

• 下载地址:
  https://yunpan.cn/cqt5xp3QAJsSM （提取码：ffaa）

第一大步肯定是需求分析,那么

·这个背单词的软件需要具备的功能:

1. 查词
2. 每日一句
3. 卡片单词,单词本,等级测试,美文欣赏(具体形式后面实现时候再介绍)
4. 设置(包括:个人设置,词库下载,缓存清理等)

大概就分这四个模块,所以样式就定成很大众的四个tab页实现

·数据来源及方式,数据库设计,
1.我选择了ICIBA 金山词霸API,因为相对有道等其他api接口,金山提供了单词,词音,每日一句及发音等 很全面.非常符合我们的需求.
2.数据库方面,主要就是记录查询过的单词,和单词测试里学习过的单词,字段都很相似

• 单词,英音标,美音标,英发音,美发音,释义,例句,查询次数,和答错次数.

根据需求删减某系字段即可.

今天主要说明一下ViewPger+Fragment实现主界面Tab的切换效果,先看效果:

基本原理就是ViewPager里面放了四个Fragment,就是这么简单,稍微复杂点就是底下图标的渐变效果.

首先如何在ViewPager里面放了四个Fragment

1. xml里声明这个控件等价于一个TextView;
2. 出镜成员:ViewPager Fragment List FragmentPagerAdapter

 private ViewPager mViewPager; // 主界面fragment容器 private List<Fragment> mTabs = new ArrayList<Fragment>(); // fragment集合 private FragmentPagerAdapter mAdapter; // 适配器 private List<TabIcon> mTabIndicators = new ArrayList<TabIcon>(); // 渐变图标集合

1. 将Fragment放入List中,

    //添加四个tab的fragment         mTabs = new ArrayList<Fragment>();         自己建的Fragment fragment1 = new 自己建的Fragment();        mTabs.add(fragment1);        自己建的Fragment fragment2 = new 自己建的Fragment();        mTabs.add(fragment2);        自己建的Fragment fragment3 = new 自己建的Fragment();        mTabs.add(fragment3);        自己建的Fragment fragment4 = new 自己建的Fragment();        mTabs.add(fragment4);

1. 将List放入FragmentPagerAdapter,

    mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public int getCount() {                return mTabs.size();            }            @Override            public Fragment getItem(int arg0) {                return mTabs.get(arg0);            }        };

1. 最后将FragmentPagerAdapter绑定在ViewPager上 ,

    mViewPager.setAdapter(mAdapter);    mViewPager.setOffscreenPageLimit(10);//这句话的意思就是再每一个fragment左右各保存5个fragment页面,此参数默认为2,为2时当你滑动到第三个fragment的时候第一个已经被销毁当你滑动回来需要重新加载,数据就没了,所以设置为10,也就是当滑动到第四个依然能保存第一个.

主界面代码:

public class MainActivity extends FragmentActivity        implements OnClickListener, OnPageChangeListener, IAtSettingFragment {    private ViewPager mViewPager; // 主界面fragment容器    private List<Fragment> mTabs = new ArrayList<Fragment>(); // fragment集合    private FragmentPagerAdapter mAdapter; // 适配器    private List<TabIcon> mTabIndicators = new ArrayList<TabIcon>(); // 渐变图标集合    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initDatas();        mViewPager.setAdapter(mAdapter);        mViewPager.setOffscreenPageLimit(10);        initEvent();    }    /**     * 初始化事件和服务     */    @SuppressWarnings("deprecation")    private void initEvent() {        mViewPager.setOnPageChangeListener(this);        Intent intent = new Intent(this, NotifyReviewService.class);        startService(intent);    }    InterpretFragment interpretFragment;    DailyFragment tabFragment;    ReciteFragment reciteFragment;    MeFragment meFragment;    /**     * 初始化数据(界面 词库)     */    private void initDatas() {        // 导入词库        new WriteToSD(this);        //添加四个tab的fragment        interpretFragment = new InterpretFragment();        mTabs.add(interpretFragment);        tabFragment = new DailyFragment();        mTabs.add(tabFragment);        reciteFragment = new ReciteFragment();        mTabs.add(reciteFragment);        meFragment = new MeFragment();        mTabs.add(meFragment);        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public int getCount() {                return mTabs.size();            }            @Override            public Fragment getItem(int arg0) {                return mTabs.get(arg0);            }        };    }    /**     * 找控件和绑定监听器     */    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.viewPager);        TabIcon one = (TabIcon) findViewById(R.id.tab_one);        mTabIndicators.add(one);        TabIcon two = (TabIcon) findViewById(R.id.tab_two);        mTabIndicators.add(two);        TabIcon three = (TabIcon) findViewById(R.id.tab_three);        mTabIndicators.add(three);        TabIcon four = (TabIcon) findViewById(R.id.tab_four);        mTabIndicators.add(four);        one.setOnClickListener(this);        two.setOnClickListener(this);        three.setOnClickListener(this);        four.setOnClickListener(this);        one.setIconAlpha(1.0f);//初始化图标透明度    }    @Override    public void onClick(View v) {        resetOtherTabs();        switch (v.getId()) {        case R.id.tab_one:            mTabIndicators.get(0).setIconAlpha(1.0f);            mViewPager.setCurrentItem(0, false);            break;        case R.id.tab_two:            mTabIndicators.get(1).setIconAlpha(1.0f);            mViewPager.setCurrentItem(1, false);            break;        case R.id.tab_three:            mTabIndicators.get(2).setIconAlpha(1.0f);            mViewPager.setCurrentItem(2, false);            break;        case R.id.tab_four:            mTabIndicators.get(3).setIconAlpha(1.0f);            mViewPager.setCurrentItem(3, false);            break;        }    }    /**     * 重制其他Tab的颜色     */    private void resetOtherTabs() {        for (int i = 0; i < mTabIndicators.size(); i++) {            mTabIndicators.get(i).setIconAlpha(0);        }    }    @Override    public void onPageScrollStateChanged(int arg0) {    }    @Override    public void onPageScrolled(int arg0, float arg1, int arg2) {        if (arg1 > 0) {            TabIcon left = mTabIndicators.get(arg0);            TabIcon right = mTabIndicators.get(arg0 + 1);            left.setIconAlpha(1 - arg1);            right.setIconAlpha(arg1);        }    }    @Override    public void onPageSelected(int arg0) {        switch (arg0) {        case 1:            interpretFragment.setSearchedPosition();            break;        case 3:            meFragment.setTvCardCount();            break;        }    }    // 实现查询单词数的更新    @Override    public void onQuery(String szContent) {        meFragment.setTvQueryCount();    }}

主界面XML代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:qit="http://schemas.android.com/apk/res/com.qit.iword"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:background="@drawable/tab_background"        android:orientation="horizontal" >        <com.qit.iword.TabIcon            android:id="@+id/tab_one"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:padding="5dp"            qit:tab_color="#FD805B"            qit:tab_icon="@drawable/tab_intercept"            qit:tab_text="翻译"            qit:tab_text_size="12sp" />        <com.qit.iword.TabIcon            android:id="@+id/tab_two"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:padding="5dp"            qit:tab_color="#FD805B"            qit:tab_icon="@drawable/tab_daily"            qit:tab_text="每句"            qit:tab_text_size="12sp" />        <com.qit.iword.TabIcon            android:id="@+id/tab_three"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:padding="5dp"            qit:tab_color="#FD805B"            qit:tab_icon="@drawable/tab_recite"            qit:tab_text="发现"            qit:tab_text_size="12sp" />        <com.qit.iword.TabIcon            android:id="@+id/tab_four"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:padding="5dp"            qit:tab_color="#FD805B"            qit:tab_icon="@drawable/tab_me"            qit:tab_text="我的"            qit:tab_text_size="12sp" />    </LinearLayout></LinearLayout>

tab_bg样式(新建drawable>tab_bg.xml)

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <stroke        android:width="1.5dp"        android:color="#eee" />    <solid android:color="#f7f7f7" /></shape>

命名空间(values>attr.xml)

    <attr name="tab_icon" format="reference"></attr>    <attr name="tab_color" format="color"></attr>    <attr name="tab_text" format="string"></attr>    <attr name="tab_text_size" format="dimension"></attr>    <declare-styleable name="TabIcon">        <attr name="tab_icon"></attr>        <attr name="tab_color"></attr>        <attr name="tab_text"></attr>        <attr name="tab_text_size"></attr>    </declare-styleable>

图标渐变效果参考Hyman老师的文章

http://blog.csdn.net/lmj623565791/article/details/41087219

其实底部效果无非就是这张图

讲解一下:如同上图,现在我们假设有两张图片Src和Dst,当我们把两张图拼在一起的时候会有后面13种情况,拿我们要用到的DstIn举例,”重合部分显示Dst”就会出现那个样式,同理可得其他.

那么就很好理解了 我底下放一个有颜色的控件,上面放一张透明背景的图标,当样式为DstIn时,两方重合部分显示颜色,就得到前面此效果了,至于渐变无非就是透明度随移动而变化.

书写TabIcon类来自定义这种View

public class TabIcon extends View {    private int mColor = 0xff45c01a;    private Bitmap mIconBitmap;    private String mText = "iWord";    private int mTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12,            getResources().getDisplayMetrics());    private Canvas mCanvas;    private Bitmap mBitmap;    private Paint mPaint;    private float mAlpha;    private Rect mIconRect;    private Rect mTextBound;    private Paint mTextPaint;    public TabIcon(Context context) {        this(context, null);    }    public TabIcon(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    /**     * 获取自定义属性的值     *      * @param context     * @param attrs     * @param defStyleAttr     */    public TabIcon(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TabIcon);        int n = a.getIndexCount();        for (int i = 0; i < n; i++) {            int attr = a.getIndex(i);            switch (attr) {            case R.styleable.TabIcon_tab_icon:                BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr);                mIconBitmap = drawable.getBitmap();                break;            case R.styleable.TabIcon_tab_color:                mColor = a.getColor(attr, mColor);                break;            case R.styleable.TabIcon_tab_text:                mText = a.getString(attr);                break;            case R.styleable.TabIcon_tab_text_size:                mTextSize = (int) a.getDimension(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12,                        getResources().getDisplayMetrics()));                break;            }        }        a.recycle();        mTextBound = new Rect();        mTextPaint = new Paint();        mTextPaint.setTextSize(mTextSize);        mTextPaint.setColor(0xff555555);        mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int iconWidth = Math.min(getMeasuredWidth() - getPaddingLeft() - getPaddingRight(),                getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - mTextBound.height());        int left = getMeasuredWidth() / 2 - iconWidth / 2;        int top = getMeasuredHeight() / 2 - (mTextBound.height() + iconWidth) / 2;        mIconRect = new Rect(left, top, left + iconWidth, top + iconWidth);    }    @Override    protected void onDraw(Canvas canvas) {        canvas.drawBitmap(mIconBitmap, null, mIconRect, null);        int alpha = (int) Math.ceil(255 * mAlpha);        setupTargetBitmap(alpha);        drawSourceText(canvas, alpha);        drawTargetText(canvas, alpha);        canvas.drawBitmap(mBitmap, 0, 0, null);    }    /**     * 绘制变色文本     *      * @param canvas     * @param alpha     */    private void drawTargetText(Canvas canvas, int alpha) {        mTextPaint.setColor(mColor);        mTextPaint.setAlpha(alpha);        int x = getMeasuredWidth() / 2 - mTextBound.width() / 2;        int y = mIconRect.bottom + mTextBound.height();        canvas.drawText(mText, x, y, mTextPaint);    }    /**     * 绘制文本     *      * @param canvas     * @param alpha     */    private void drawSourceText(Canvas canvas, int alpha) {        mTextPaint.setColor(0xff333333);        mTextPaint.setAlpha(255 - alpha);        int x = getMeasuredWidth() / 2 - mTextBound.width() / 2;        int y = mIconRect.bottom + mTextBound.height();        canvas.drawText(mText, x, y, mTextPaint);    }    /**     * 绘制可变色Icon     *      * @param alpha     */    private void setupTargetBitmap(int alpha) {        mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Config.ARGB_8888);        mCanvas = new Canvas(mBitmap);        mPaint = new Paint();        mPaint.setColor(mColor);        mPaint.setAntiAlias(true);        mPaint.setDither(true);        mPaint.setAlpha(alpha);        mCanvas.drawRect(mIconRect, mPaint);        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));        mPaint.setAlpha(255);        mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);    }    public void setIconAlpha(float alpha) {        this.mAlpha = alpha;        invalidateView();    }    /**     * 重绘     */    private void invalidateView() {        if (Looper.getMainLooper() == Looper.myLooper()) {            invalidate();        } else {            postInvalidate();        }    }    private static final String INSTANCE_STATUS = "instance_status";    private static final String STATUS_ALPHA = "status_alpha";    @Override    protected Parcelable onSaveInstanceState() {        Bundle bundle = new Bundle();        bundle.putParcelable(INSTANCE_STATUS, super.onSaveInstanceState());        bundle.putFloat(STATUS_ALPHA, mAlpha);        return bundle;    }    @Override    protected void onRestoreInstanceState(Parcelable state) {        if(state instanceof Bundle){            Bundle bundle = (Bundle) state;            mAlpha = bundle.getFloat(STATUS_ALPHA);            super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATUS));            return;        }        super.onRestoreInstanceState(state);    }}

再说一遍,颜色渐变代码属于完全抄袭完全,呵呵哒…

好主界面tab的UI就完成了,下一篇实现第一个fragment查词.