Android 用户表单融合各类简易控件以及融入FloatingActionButton以及butterknife

转载请注明出处王亟亟的大牛之路

空了2个礼拜,终于开始有事做了,用了午休时间和下午的大概1个小时,完成了这个例子,让小伙伴们,对一些常用的表单所需的控件,做一个温故,再配合炫酷的FloatingActionButton以及好用butterknife,可以有效的提高我们的效率。
包结构:

项目是Android Studio的所以贴下Gradle配置:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "test.wjj.com.formdemo"
        minSdkVersion 14
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:cardview-v7:22.2.1'
    compile 'de.hdodenhof:circleimageview:1.3.0'
    compile 'com.android.support:design:22.2.1'
    compile 'com.jakewharton:butterknife:6.1.0'
    compile 'com.nineoldandroids:library:2.4.0+'
}

运行之后的样子

点击提交之后的效果

全程都是Toast来呈现一些数据,懒的写一些Dialog了,内容对就行。

MainActivity

public class MainActivity extends AppCompatActivity {
    @InjectView(R.id.nameeditText)EditText nameeditText;
    @InjectView(R.id.passwordeditText)EditText passwordeditText;
    @InjectView(R.id.sexswitch)Switch sexswitch;
    @InjectView(R.id.schoolspinner)Spinner schoolspinner;
    @InjectView(R.id.seekBar)SeekBar seekBar;
    @InjectView(R.id.imagebutton)Button imagebutton;
    @InjectView(R.id.photoview)ImageView photoview;
    @InjectView(R.id.fab) FloatingActionButton fab;
    @InjectView(R.id.overlay) View overlay;
    @InjectView(R.id.sheet) View sheet;
    //性别
    String sex="";
    //学校
    String Schoole="";
    //SeekBar值
    int SeekBarValue=0;
    //spinner的适配器
    private ArrayAdapter<String> adapter;
    private List<String> list = new ArrayList<String>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        init();
    }

    @OnClick(R.id.fab)
    void onClickFab() {
        if (fab.getVisibility() == View.VISIBLE) {
            FabTransformation.with(fab).setOverlay(overlay).transformTo(sheet);
        }
    }

    @OnClick({R.id.row_1,R.id.row_2})
    void onClickRow1(View view) {
        if(view.getId()==R.id.row_1){
            Toast.makeText(MainActivity.this,"提交",Toast.LENGTH_SHORT).show();
            process();
        }else if(view.getId()==R.id.row_2){
            Toast.makeText(MainActivity.this,"取消",Toast.LENGTH_SHORT).show();
        }
        if (fab.getVisibility() != View.VISIBLE) {
            FabTransformation.with(fab).setOverlay(overlay).transformFrom(sheet);
        }
    }

    @OnCheckedChanged(R.id.sexswitch)
    void onsexSwitch(boolean isChecked){
        if(isChecked){
            sex="女";
        }else{
            sex="男";
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onBackPressed() {
        if (fab.getVisibility() != View.VISIBLE) {
            FabTransformation.with(fab).setOverlay(overlay).transformFrom(sheet);
            return;
        }
        super.onBackPressed();
    }

    private  void init(){
        //第一步:添加一个下拉列表项的list,这里添加的项就是下拉列表的菜单项
        list.add("上海大学");
        list.add("华东理工大学");
        list.add("厦门大学");
        list.add("北京大学");

        //第二步:为下拉列表定义一个适配器,这里就用到里前面定义的list。
        adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, list);
        //第三步:为适配器设置下拉列表下拉时的菜单样式。
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        schoolspinner.setAdapter(adapter);
        //第五步:为下拉列表设置各种事件的响应,这个事响应菜单被选中
        schoolspinner.setOnItemSelectedListener(new Spinner.OnItemSelectedListener() {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                Schoole = adapter.getItem(arg2);
                /* 将mySpinner 显示*/
                arg0.setVisibility(View.VISIBLE);
            }

            public void onNothingSelected(AdapterView<?> arg0) {
                arg0.setVisibility(View.VISIBLE);
            }
        });
        /*下拉菜单弹出的内容选项触屏事件处理*/
        schoolspinner.setOnTouchListener(new Spinner.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                return false;
            }
        });
        /*下拉菜单弹出的内容选项焦点改变事件处理*/
        schoolspinner.setOnFocusChangeListener(new Spinner.OnFocusChangeListener() {
            public void onFocusChange(View v, boolean hasFocus) {
                // TODO Auto-generated method stub

            }
        });
        seekBar.setProgress(0);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                SeekBarValue=seekBar.getProgress();
            }
        });
    }

    private void process(){

        if(nameeditText.getText().toString().length()<=0||nameeditText.getText().toString().equals("")){
            Toast.makeText(MainActivity.this,"姓名不能为空",Toast.LENGTH_SHORT).show();
        }else if(passwordeditText.getText().toString().length()<=0||passwordeditText.getText().toString().equals("")){
            Toast.makeText(MainActivity.this,"密码不能为空",Toast.LENGTH_SHORT).show();
        }else if(sex==null){
            Toast.makeText(MainActivity.this,"性别没有选",Toast.LENGTH_SHORT).show();
        }else if(Schoole.length()<=0||Schoole.equals("")){
            Toast.makeText(MainActivity.this,"学校没有选",Toast.LENGTH_SHORT).show();
        }else if(SeekBarValue==0){
            Toast.makeText(MainActivity.this,"请拖动进度条",Toast.LENGTH_SHORT).show();
        }else{
            Toast.makeText(MainActivity.this,"名字叫:"+nameeditText.getText().toString()+"  "+"密码是:"+passwordeditText.getText()+"  "+
                    "性别是:"+sex+"  "+"学校是:"+Schoole+" "+"满意度是:"+SeekBarValue,Toast.LENGTH_LONG).show();
        }
    }
}

分析:

Switch调用OnCheckedChanged监听事件来判断男女,false为男(默认),True=女。
Spinner用ArrayAdapter来填充了一些字符串数据到了适配器中呈现出来,然后用setOnItemSelectedListener来监听用户的选择,并获取值。
seekBar调用setOnSeekBarChangeListener来监听进度,默认值设为0,在onStopTrackingTouch方法获取最终的值。
还有一些就是FabTransformation的一些操作了可以看http://blog.csdn.net/ddwhan0123/article/details/47317775这篇文章来进一步的了解。

布局文件(这个整的蛋疼,表单就是这么长)

<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollView"
        android:layout_centerHorizontal="true"
        android:fillViewport="false"
        android:layout_alignParentTop="true" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="true">

            <View
                android:id="@+id/overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#4D000000"
                android:clickable="true"
                android:visibility="gone" />
            <!-- 账号 -->
            <LinearLayout
                android:id="@+id/nameLayout"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/view_linnerlayout_border"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:paddingBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="帐号: "
                    android:id="@+id/nametextView"
                    android:textSize="18dp"/>

                <EditText
                    android:layout_width="280dp"
                    android:layout_height="wrap_content"
                    android:id="@+id/nameeditText"
                    android:layout_gravity="center_horizontal" />
            </LinearLayout>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:id="@+id/imageView"
                android:background="@color/white"/>

            <!-- 密码 -->
            <LinearLayout
                android:id="@+id/passwordLayout"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/view_linnerlayout_border"
                android:gravity="center_vertical"
                android:paddingLeft="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="密码: "
                    android:id="@+id/passwordtextView"
                    android:textSize="18dp"/>

                <EditText
                    android:layout_width="280dp"
                    android:layout_height="wrap_content"
                    android:id="@+id/passwordeditText"
                    android:layout_gravity="center_horizontal" />
            </LinearLayout>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@color/white"/>

        <!-- 性别 -->
        <LinearLayout
            android:id="@+id/sexLayout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/view_linnerlayout_border"
            android:gravity="center_vertical"
            android:paddingLeft="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="性别:"
                android:id="@+id/sextextView"
                android:textSize="18dp"
                android:layout_weight="1"/>

            <Switch
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textOff="男"
                android:textOn="女"
                android:id="@+id/sexswitch" />
        </LinearLayout>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@color/white"/>
            <!-- 学校 -->
            <LinearLayout
                android:id="@+id/schoolLayout"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/view_linnerlayout_border"
                android:gravity="center_vertical"
                android:paddingLeft="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="毕业学校"
                    android:id="@+id/schooltextView"
                    android:textSize="18dp"
                    android:layout_weight="1"/>

                <Spinner
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/schoolspinner"
                    android:layout_weight="2" />

            </LinearLayout>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@color/white"/>
            <!-- 满意度 -->
            <LinearLayout
                android:id="@+id/satisfactionLayout"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/view_linnerlayout_border"
                android:gravity="center_vertical"
                android:paddingLeft="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="满意度:"
                    android:id="@+id/satisfactiontextView"
                    android:textSize="18dp"
                    android:layout_weight="1"/>

                <SeekBar
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/seekBar"
                    android:layout_weight="6"
                    android:indeterminate="false" />
            </LinearLayout>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@color/white"/>
            <!-- 传证件 -->
            <LinearLayout
                android:id="@+id/imageLayout"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:gravity="center_vertical"
                android:paddingLeft="10dp">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="上传照片"
                    android:id="@+id/imagebutton"
                    android:layout_gravity="center_horizontal"
                    android:background="@drawable/buttonshape"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/photoview"
                    android:layout_gravity="center"
                    android:src="@drawable/maimaiicon"/>
            </LinearLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab"
                    style="@style/FabMargin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/ic_add_black_24dp"
                    app:backgroundTint="#FFA07A"
                    app:borderWidth="0dp" />

                <codetail.widget.RevealFrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true">
                    <android.support.v7.widget.CardView
                        android:id="@+id/sheet"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/spacing"
                        android:visibility="gone"
                        app:cardElevation="2dp">
                        <LinearLayout
                            android:layout_width="240dp"
                            android:layout_height="wrap_content"
                            android:orientation="vertical">

                            <RelativeLayout
                                android:id="@+id/row_1"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:background="@color/yellow"
                                android:paddingBottom="@dimen/spacing_small"
                                android:paddingLeft="@dimen/spacing"
                                android:paddingRight="@dimen/spacing"
                                android:paddingTop="@dimen/spacing_small">

                                <ImageView
                                    android:id="@+id/aa"
                                    android:layout_width="@dimen/img_thumb"
                                    android:layout_height="@dimen/img_thumb"
                                    android:scaleType="center"
                                    android:src="@drawable/ic_edit_grey_900_24dp" />

                                <TextView
                                    android:id="@+id/txtsubmit"
                                    style="@style/TextContent"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_centerVertical="true"
                                    android:layout_marginLeft="@dimen/spacing"
                                    android:layout_toRightOf="@id/aa"
                                    android:text="提交" />

                            </RelativeLayout>
                            <ImageView
                                android:layout_width="match_parent"
                                android:layout_height="5dp"
                                android:background="@color/white"/>
                            <RelativeLayout
                                android:id="@+id/row_2"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:background="@color/lightpink"
                                android:paddingBottom="@dimen/spacing_small"
                                android:paddingLeft="@dimen/spacing"
                                android:paddingRight="@dimen/spacing"
                                android:paddingTop="@dimen/spacing_small">

                                <TextView
                                    android:id="@+id/txtcancel"
                                    style="@style/TextContent"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_centerVertical="true"
                                    android:layout_marginLeft="@dimen/spacing"
                                    android:text="取消" />

                            </RelativeLayout>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                </codetail.widget.RevealFrameLayout>
            </RelativeLayout>
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="TextContent">
        <item name="android:textSize">@dimen/text_medium</item>
        <item name="android:textColor">@color/black</item>
        <item name="android:lineSpacingExtra">2dp</item>
    </style>

    <style name="FabMargin">
        <item name="android:layout_marginLeft">8dp</item>
        <item name="android:layout_marginRight">8dp</item>
        <item name="android:layout_marginBottom">0dp</item>
    </style>

</resources>

源码地址:http://yunpan.cn/cdXpLBzndqLqB 访问密码 3c7d

大字体,楼主最近都不知道看些什么,写些什么了,希望小伙伴们支支招,给点idea,也可以把想了解的留言在下方,我知道的,我就写点文章分析分析,不知道的话就当学习的方向,谢谢哈!!

时间: 2024-09-10 00:12:08

Android 用户表单融合各类简易控件以及融入FloatingActionButton以及butterknife的相关文章

validator-Validator验证表单,jqueryUI spinner控件值无法验证通过的

问题描述 Validator验证表单,jqueryUI spinner控件值无法验证通过的 在表单中试用了jqueryUI中的spinner ,表单使用jquery插件 formvalidate验证.当提交表单时会验证,在验证失败的控件上显示红叉.而当再次输入正确的值时该红叉会变为对号.在spinner中写值,直接提交空表.spinner控件上报红叉,该空间验证了不为空.可当通过spinner上的按钮给spinner赋值,spinner的验证还是失败.必须手写输入才行. 验证失败后点击spinn

ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]

前言 本以为可以稳稳当当的工作.安安心心的写文章,结果我做了一件非常疯狂的事情,换新工作一周后辞了--然后去了另外一家公司 - - #,理由就不详说了,总之现在是每天加班到8-9点,虽然如此但是这个团队非常棒,喜欢这里的气氛,大家都努力的工作着,经理也是常睡在公司,希望产品顺顺利利的月底上线,我也加油 !不过这样一来文章可能会慢点,挤挤时间吧:  ) 本篇主要是将对Ext常用控件和属性进行封装,以减少动辄几百行的JS代码,也方便使用. 系列 1. ExtJs 备忘录(1)-- Form表单(一)

ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]

前言 ExtJS接触至今已有4个月(5.1 - 9.1),小有心得,由于公司短期内并没有打算采用,所以备忘之以备他日之需.虽然网上资料不少,但学起来仍感费劲,所以还是想以自己的方式来与众分享. 系列 1. ExtJs 备忘录(1)-- Form表单(一) [ 控件使用 ] 版本 Ext 3.0.0 正文 一.效果图 先用美图勾引那些驻足观望之人: 二.代码讲解 如果项目中大量采用ExtJS做前端,我建议采用PageBase方式来引用和使用它. 2.1 目录结构 项目中使用Ext并不需要把整个Ex

采用infoPath2007制作表单的话,按钮控件设置成“运行查询”,请问怎么将该”运行查询”按钮与某个文本框对应起来啊?

问题描述 有一个文本框A,还有一个"运行查询"按钮,我想点击该按钮时,能够根据文本框A的内容到ACCESS数据库里进行查询.问题是:怎么将"运行查询"按钮与文本框A联系起来啊?????我在网上查到的答案是:"运行查询"按钮基于前一个控件中的值查询数据库.--------啥意思嘛? 解决方案 解决方案二:你在前端用js在点击事件的时候获取到文本框中的值.然后再ajax到后台进行查询

ExtJs 备忘录(1)—— Form表单(上) [ 控件使用 ]

版本 Ext 3.0.0 正文 一.效果图 先用美图勾引 那些驻足观望之人: 二.代码讲解 如果项目中大量采用ExtJS做前端,我建议采用 PageBase方式来引用和使用它. 2.1 目录结构

Android用表单上传图片到服务器怎么携带两个参数?

问题描述 Android用表单上传图片到服务器怎么携带两个参数? 在做更换头像的功能,需要用表单上传图片到服务器怎么携带两个参数,但两个参数一直都传不过去,求大牛指点方法 解决方案 将图片转换成流,搞个实体存储两个参数不就可以了

基于云计算的智能电表用户表单隐私保护

基于云计算的智能电表用户表单隐私保护 任梦吟 毛琪琦 马婷 文红 智能电力系统的快速发展,对于海量数据的存储及计算的要求越来越高,使其与云计算的结合成为必然.但是接入云计算系统不可避免的带来了数据安全问题.本文针对智能电表系统的用户信息隐私保护,基于数据组合隐私机制,引入可信第三方,运用数据分块存储及分块关系混淆技术保护智能电表系统的用户隐私.并提出分块信息表单系统,在分块存储环境下实现数据插入与数据查询. 基于云计算的智能电表用户表单隐私保护

请问android如何实现在一个activity使用按钮控件控制不同的布局文件?

问题描述 请问android如何实现在一个activity使用按钮控件控制不同的布局文件? 如题,比如说在同一个activity下当用户点击第一个按钮之后activity的布局随之换成另一个布局文件~ 解决方案 最简单的办法,重新setContentView 解决方案二: 上面的没错,或者layout写多个布局,控制显示隐藏

android中响应Fragment界面中的控件的问题

问题描述 android中响应Fragment界面中的控件的问题 Fragment界面中 怎么对其中的控件比如按钮添加监听事件?先说好,在onCreateView()跟onActivityCreated()中添加是没有反应的 解决方案 在 fragment中:(点击button弹出toast)@Override public View onCreateView(LayoutInflater inflater ViewGroup container Bundle savedInstanceStat