登陆界面的完成、以及使用Fragment完成界面切换 和 首页轮播图的完成~

首先 我是一名大二的学生  最近开始学习android stdio  为了完成期末大作业,开始研究android stdio  写博客呢首先是希望记录自己的学习过程  其次就是希望看到好多大佬的博客对我完成作业起到了很多帮助的作用,也想写一篇帮助他人。话不多说开始正题。


先看下我最后我完成的效果图:

                  

          登陆界面效果图                                首页效果(包括一个轮播图)             底栏切换第二个界面效果


1、登陆界面: 登陆界面主要包括有二: 启动登陆界面的Activity   以及   对应的xml布局文件  

 代码如下:

Activity文件代码:

import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.view.View.OnClickListener;

public class LoginActivity extends AppCompatActivity {
    private Button bt_denglu;
    private String username;
    private String passwed;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        bt_denglu=(Button)this.findViewById( R.id.bt_denglu );
        bt_denglu.setOnClickListener( new OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(  );
                intent.setClass( LoginActivity.this,ShouYeActivity.class );
                startActivity( intent );
            }
        } );

        EditText editText1 = (EditText) findViewById(R.id.passwd);
        Drawable drawable1 = getResources().getDrawable(R.drawable.mima);
        drawable1.setBounds(0, 0, 150, 150);//第一0是距左边距离,第二0是距上边距离,40分别是长宽
        editText1.setCompoundDrawables(drawable1, null, null, null);//只放左边

        EditText editText2 = (EditText) findViewById(R.id.username);
        Drawable drawable2 = getResources().getDrawable(R.drawable.yonghu);
        drawable2.setBounds(0, 0, 150, 150);//第一0是距左边距离,第二0是距上边距离,40分别是长宽
        editText2.setCompoundDrawables(drawable2, null, null, null);//只放左边
    }
}

这里首先定义三个全局变量 分别为:Button类型的登陆按钮 、String类型的username 、password (username 、password我暂时没有用,为以后连接数据作准备)在create函数中  获取button按钮 ,设置监听  定义意向 达到以后在不同activity中跳转的目的,下面的代码是对底栏进行设置  分别是:得到用户账号和密码   在Edittext左方添加用户图片及密码图片,然后设置图片的位置。具体参数代码中有注释 ,大家自己看哈~


XML布局文件代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bj1"
    tools:context="com.example.jishuai.hoh.LoginActivity">


    <LinearLayout

        android:id="@+id/denglu"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:layout_marginTop="50dp"
        android:orientation="vertical">


        <View
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:background="@drawable/guanlan"/>


        <LinearLayout
            android:id="@+id/zhudenglu"
            android:layout_width="match_parent"
            android:layout_height="159dp"
            android:layout_gravity="center"
            android:orientation="vertical">


            <EditText
                android:id="@+id/username"
                android:layout_width="200dp"
                android:layout_height="80dp"
                android:layout_gravity="center"
                android:drawableLeft="@drawable/yonghu"
                android:hint="请输入账号 "
                android:singleLine="true" />

            <EditText
                android:id="@+id/passwd"
                android:layout_width="200dp"
                android:layout_height="80dp"
                android:layout_gravity="center"
                android:drawableLeft="@drawable/mima"
                android:hint="请输入密码"
                android:inputType="numberPassword"
                android:singleLine="true" />


        </LinearLayout>


        <Button
            android:id="@+id/bt_denglu"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:background="@drawable/aaa"
            android:text="登   陆"
            android:textColor="#faf9f9"
            android:textSize="40sp" />


    </LinearLayout>
</LinearLayout>

布局文件怎么说呢,我在学习的过程中完全都是照猫画虎,画的多了也就慢慢的会了。切记无论多么简单的布局都要用代码去写,这样会很快的对属性有所了解。  还有因为我是小菜鸟嘛  有些时候看到也会直接复制 。  如果你复制我的代码的画肯定会报错  因为很多图片你是没有放到ddrawable资源文件中  所以看见很多小红线不要紧张,我一开始就是那样的非常急躁,浪费了很多时间。


2、接下来说下底栏完成界面的切换。

在做底栏切换时 其实是我开始学习android的第一个瓶颈,因为大一Java学习的并不是很扎实,所以很吃力。但是吧 无论你怎么样 我还是希望你能坚持下去  不会就去看  我最深的感触就是 android是一个能立马就能见到回报的东西,当你看到手机上显示的样子和你想的样子是一样的时候会很有成就感,这也就是我一直坚持下去的原因。

说代码吧:

首页呢需要的东西就会相对的比较多了  一个Activity以及四个Fragment同时每个Fragment对应一个XML布局文件


首页Activity代码:

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity; // 注意这里我们导入的V4的包,不要导成app的包了
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
 * 主页面内容
 * Created by dm on 16-1-19.
 */
public class ShouYeActivity extends FragmentActivity implements View.OnClickListener {



    // 定义4个Fragment对象
    private FirstFragment fg1;
    private SecondFragment fg2;
    private ThirdFragment fg3;
    private FourthFragment fg4;
    // 帧布局对象,用来存放Fragment对象
    // 定义每个选项中的相关控件
    private RelativeLayout firstLayout;
    private RelativeLayout secondLayout;
    private RelativeLayout thirdLayout;
    private RelativeLayout fourthLayout;
    private ImageView firstImage;
    private ImageView secondImage;
    private ImageView thirdImage;
    private ImageView fourthImage;
    private TextView firstText;
    private TextView secondText;
    private TextView thirdText;
    private TextView fourthText;
    // 定义几个颜色
    private int whirt = 0xFFFFFFFF;
    private int gray = 0xFF7597B3;
    private int dark = 0xff000000;
    // 定义FragmentManager对象管理器
    private FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shou_ye);
        fragmentManager = getSupportFragmentManager();
        initView(); // 初始化界面控件
        setChioceItem(0); // 初始化页面加载时显示第一个选项
    }
    /**
     * 初始化页面
     */
    private void initView() {
// 初始化页面标题栏

// 初始化底部导航栏的控件
        firstImage = (ImageView) findViewById(R.id.first_image);
        secondImage = (ImageView) findViewById(R.id.second_image);
        thirdImage = (ImageView) findViewById(R.id.third_image);
        fourthImage = (ImageView) findViewById(R.id.fourth_image);
        firstText = (TextView) findViewById(R.id.first_text);
        secondText = (TextView) findViewById(R.id.second_text);
        thirdText = (TextView) findViewById(R.id.third_text);
        fourthText = (TextView) findViewById(R.id.fourth_text);
        firstLayout = (RelativeLayout) findViewById(R.id.first_layout);
        secondLayout = (RelativeLayout) findViewById(R.id.second_layout);
        thirdLayout = (RelativeLayout) findViewById(R.id.third_layout);
        fourthLayout = (RelativeLayout) findViewById(R.id.fourth_layout);
        firstLayout.setOnClickListener(ShouYeActivity.this);
        secondLayout.setOnClickListener(ShouYeActivity.this);
        thirdLayout.setOnClickListener(ShouYeActivity.this);
        fourthLayout.setOnClickListener(ShouYeActivity.this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.first_layout:
                setChioceItem(0);
                break;
            case R.id.second_layout:
                setChioceItem(1);
                break;
            case R.id.third_layout:
                setChioceItem(2);
                break;
            case R.id.fourth_layout:
                setChioceItem(3);
                break;
            default:
                break;
        }
    }
    /**
     * 设置点击选项卡的事件处理
     *
     * @param index 选项卡的标号:0, 1, 2, 3
     */
    private void setChioceItem(int index) {
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        clearChioce(); // 清空, 重置选项, 隐藏所有Fragment
        hideFragments(fragmentTransaction);
        switch (index) {
            case 0:
                //firstImage.setImageResource(R.drawable.xxx);
                firstText.setTextColor(dark);
                firstLayout.setBackgroundColor(gray);
// 如果fg1为空,则创建一个并添加到界面上
                if (fg1 == null) {
                    fg1 = new FirstFragment();
                    fragmentTransaction.add(R.id.content, fg1);
                } else {
// 如果不为空,则直接将它显示出来
                    fragmentTransaction.show(fg1);
                }
                break;
            case 1:
// secondImage.setImageResource(R.drawable.XXXX);
                secondText.setTextColor(dark);
                secondLayout.setBackgroundColor(gray);
                if (fg2 == null) {
                    fg2 = new SecondFragment();
                    fragmentTransaction.add(R.id.content, fg2);
                } else {
                    fragmentTransaction.show(fg2);
                }
                break;
            case 2:
// thirdImage.setImageResource(R.drawable.XXXX);
                thirdText.setTextColor(dark);
                thirdLayout.setBackgroundColor(gray);
                if (fg3 == null) {
                    fg3 = new ThirdFragment();
                    fragmentTransaction.add(R.id.content, fg3);
                } else {
                    fragmentTransaction.show(fg3);
                }
                break;
            case 3:
// fourthImage.setImageResource(R.drawable.XXXX);
                fourthText.setTextColor(dark);
                fourthLayout.setBackgroundColor(gray);
                if (fg4 == null) {
                    fg4 = new FourthFragment();
                    fragmentTransaction.add(R.id.content, fg4);
                } else {
                    fragmentTransaction.show(fg4);
                }
                break;
        }
        fragmentTransaction.commit(); // 提交
    }
    /**
     * 当选中其中一个选项卡时,其他选项卡重置为默认
     */
    private void clearChioce() {
// firstImage.setImageResource(R.drawable.XXX);
        firstText.setTextColor(gray);
        firstLayout.setBackgroundColor(whirt);
// secondImage.setImageResource(R.drawable.XXX);
        secondText.setTextColor(gray);
        secondLayout.setBackgroundColor(whirt);
// thirdImage.setImageResource(R.drawable.XXX);
        thirdText.setTextColor(gray);
        thirdLayout.setBackgroundColor(whirt);
// fourthImage.setImageResource(R.drawable.XXX);
        fourthText.setTextColor(gray);
        fourthLayout.setBackgroundColor(whirt);
    }
    /**
     * 隐藏Fragment
     *
     * @param fragmentTransaction
     */
    private void hideFragments(FragmentTransaction fragmentTransaction) {
        if (fg1 != null) {
            fragmentTransaction.hide(fg1);
        }
        if (fg2 != null) {
            fragmentTransaction.hide(fg2);
        }
        if (fg3 != null) {
            fragmentTransaction.hide(fg3);
        }
        if (fg4 != null) {
            fragmentTransaction.hide(fg4);
        }
    }
}





Fragment代码(这里我贴出来两个,第一个是首页的  因为涉及轮播图,其余三个都一样大家自行copy就好)

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by dm on 16-3-29.
 * 第一个页面
 */
public class FirstFragment extends Fragment {
    private  View mView;
    private ViewPager mViewPaper;
    private List<ImageView> images;
    private List<View> dots;
    private int currentItem;
    //记录上一次点的位置
    private  int oldPosition=0;


    //存放图片的ID
    private int[] imageIds = new int[]{
      R.drawable.home_bg0,R.drawable.jms,R.drawable.nba,
            R.drawable.home_bg3,R.drawable.bisai,
    };

    //存放图片的标题
    private String[] titles = new String[]{
            "曾经陪你一起打球的人们啊",
            "詹姆斯永远不会凉凉!",
            "这个夏天的NBA",
            "高手篮球训练班开始报名了",
            "再见欧文!再会骑士VS勇士!",
    };

    private TextView title;
    private ViewPagerAdapter  adapter;
    private ScheduledExecutorService scheduledExecutorService;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mView = inflater.inflate(R.layout.fg1, container, false);
        setmView();
        return mView;
    }

    private void setmView(){
        mViewPaper = (ViewPager)mView.findViewById( R.id.vp );

        //显示图片
        images = new ArrayList<>(  );
        for (int i=0;i<imageIds.length;i++){
            ImageView imageView = new ImageView( getActivity() );
            imageView.setBackgroundResource( imageIds[i] );
            images.add( imageView );
        }

        //显示小白点
        dots = new ArrayList<>(  );
        dots.add( mView.findViewById( R.id.dot_0 ) );
        dots.add( mView.findViewById( R.id.dot_1 ) );
        dots.add( mView.findViewById( R.id.dot_2 ) );
        dots.add( mView.findViewById( R.id.dot_3 ) );
        dots.add( mView.findViewById( R.id.dot_4 ) );

        title  = (TextView)mView.findViewById( R.id.title );
        title.setText( titles[0] );

        adapter = new ViewPagerAdapter();
        mViewPaper.setAdapter( adapter );




        mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener(){

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                title.setText( titles[position] );
                dots.get( position ).setBackgroundResource( R.drawable.dot_yes );
                dots.get( position ).setBackgroundResource( R.drawable.dot_no );

                oldPosition = position;
                currentItem = position;

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    /*定义适配器*/
    public class ViewPagerAdapter extends PagerAdapter {

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

        @Override
        public  boolean isViewFromObject(View arg0,Object arg1){
            return arg0 == arg1;
        }

        @Override
        public void destroyItem(ViewGroup view,int position,Object object){
            view.removeView( images.get( position ) );
        }

        @Override
        public  Object instantiateItem(ViewGroup view ,int position){
            view.addView( images.get( position ) );
            return images.get( position );
        }
    }

    //利用线性池执行动画轮播

    @Override
    public void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleWithFixedDelay(
                new ViewPageTask(),
                2,
                2,
                TimeUnit.SECONDS);
    }


    //图片轮播任务
    private class ViewPageTask implements Runnable {
        @Override
        public void run() {
            currentItem = (currentItem+1)%imageIds.length;
            mHandler.sendEmptyMessage(0);

        }
    }

    //接受子线程传递过来的数据

    private Handler mHandler = new Handler(){
        public void handleMessage(android.os.Message msg){
            mViewPaper.setCurrentItem( currentItem );
        };

    };

    @Override
    public  void onStop(){
        super.onStop();
        if(scheduledExecutorService != null){
            scheduledExecutorService.shutdown();
            scheduledExecutorService = null;
        }

    }

}



import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by dm on 16-3-29.
 * 第一个页面
 */
public class SecondFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg2, container, false);
        return view;
    }
}

这里有很多我也不是很懂  比如利用线性池那块我就不是很懂,如果你有什么问题可以随时问我,我会的话一定给你答复。至于其他的我都在代码中加了注释。大家可以先自行理解,学习嘛  就是一个慢慢摸索的过程。


FristFragment对应的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">


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dip">

        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:background="#33000000"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="图片标题"
                android:textColor="@android:color/white" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"
                android:orientation="horizontal">

                <View
                    android:id="@+id/dot_0"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_yes" />

                <View
                    android:id="@+id/dot_1"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_no" />

                <View
                    android:id="@+id/dot_2"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_no" />

                <View
                    android:id="@+id/dot_3"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_no" />

                <View
                    android:id="@+id/dot_4"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip"
                    android:background="@drawable/dot_no" />

            </LinearLayout>
        </LinearLayout>
    </FrameLayout>


</RelativeLayout>

其与三个XML布局文件代码:(只列举了一个)

<?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:gravity="center"
    android:background="#e6b587"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个页面"
        android:textSize="22sp"/>
</LinearLayout>




到这里就差不多了  轮播图文件渗透在FirstFragment 和  对应的XML布局文件中了 ,也就是我刚才提到的线性池的问题。

好啦~今天就到这里啦  我去跑会步  大家有问题可以随时留言哈  但是我不能保证一定能给大家解决  我也是个小垃圾。










  • 7
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值