Android 伸缩搜索框

在这里插入图片描述

1.首先写入布局

<?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"
    tools:context=".MainActivity"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="24dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="啦啦"/>
    </LinearLayout>

    <RelativeLayout
        android:layout_alignParentRight="true"
        android:id="@+id/search_linear"
        android:layout_width="35dp"
        android:layout_height="24dp"
        android:background="@drawable/cinema_search_shape">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/search_image"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:paddingLeft="6dp"
                android:src="@mipmap/com_icon_search_default" />
            <EditText
                android:id="@+id/search_edname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_marginTop="0dp"
                android:background="@null"
                android:ems="8"
                android:padding="5dp"
                android:textColor="#f2f2f2"
                android:textSize="12sp"/>
            <TextView
                android:id="@+id/search_textName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:paddingTop="3dp"
                android:text="搜索"
                android:textColor="#ffffff"
                android:textSize="12sp"
                android:visibility="gone"/>
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

2.背景设置

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:endColor="#f66b1c"
        android:startColor="#fad961" />
    <corners
        android:bottomLeftRadius="12dp"
        android:topLeftRadius="12dp" />
</shape>

3.主页面代码



public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView search_image;
    private EditText search_edname;
    private TextView search_textName;
    private RelativeLayout search_linear;
    private AutoTransition transition;

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

    private void initView() {
        search_image = (ImageView) findViewById(R.id.search_image);
        search_edname = (EditText) findViewById(R.id.search_edname);
        search_textName = (TextView) findViewById(R.id.search_textName);
        search_linear = (RelativeLayout) findViewById(R.id.search_linear);
        //点击事件
        search_image.setOnClickListener(this);
        search_textName.setOnClickListener(this);

    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.search_image:
                //点击搜索 伸展
                initExpand();
                break;
            case R.id.search_textName:
                //点击text收缩
                initReduce();
                break;
        }
    }


    /*设置伸展状态时的布局*/
    public void initExpand() {
        search_edname.setHint("CGV影城");
        search_edname.requestFocus();
        search_edname.setHintTextColor(Color.WHITE);
        search_textName.setText("搜索");
        search_textName.setVisibility(View.VISIBLE);
        search_edname.setVisibility(View.VISIBLE);
        LinearLayout.LayoutParams LayoutParams = (LinearLayout.LayoutParams) search_linear.getLayoutParams();
        LayoutParams.width = dip2px(170);
        LayoutParams.setMargins(dip2px(0), dip2px(0), dip2px(0), dip2px(0));
        search_linear.setLayoutParams(LayoutParams);
        search_edname.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                search_edname.setFocusable(true);
                search_edname.setFocusableInTouchMode(true);
                return false;
            }
        });
        //开始动画
        beginDelayedTransition(search_linear);

    }

    /*设置收缩状态时的布局*/
    private void initReduce() {
        search_edname.setCursorVisible(false);
        search_edname.setVisibility(View.GONE);
        search_textName.setVisibility(View.GONE);
        LinearLayout.LayoutParams LayoutParams = (LinearLayout.LayoutParams) search_linear.getLayoutParams();
        LayoutParams.width = dip2px(40);
        LayoutParams.setMargins(dip2px(0), dip2px(0), dip2px(0), dip2px(0));
        search_linear.setLayoutParams(LayoutParams);

        //隐藏键盘
        InputMethodManager imm = (InputMethodManager) this.getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(this.getWindow().getDecorView().getWindowToken(), 0);
        search_edname.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                search_edname.setCursorVisible(true);
            }
        });
        //开始动画
        beginDelayedTransition(search_linear);
    }


    @TargetApi(Build.VERSION_CODES.KITKAT)
    private void beginDelayedTransition(ViewGroup view) {
        transition = new AutoTransition();
        transition.setDuration(500);
        TransitionManager.beginDelayedTransition(view, transition);
    }

    private int dip2px(float dpVale) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dpVale * scale + 0.5f);
    }
}

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 在uniapp中,可以使用以下代码来实现伸缩搜索栏的效果: ```css overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; ``` 这段代码使用了一系列的CSS属性来控制搜索框的显示效果。其中,`overflow: hidden`用于隐藏溢出的内容,`word-break: break-all`允许在单词内换行,`text-overflow: ellipsis`用于在溢出的部分显示省略号,`display: -webkit-box`将对象作为伸缩盒子模型显示,`-webkit-box-orient: vertical`设置子元素的排列方式为垂直方向,`-webkit-line-clamp: 1`指定显示的行数为1行。 另外,如果你想在动态设置导航栏搜索框的内容,可以使用以下代码: ```javascript const setNavSearchInput = (keyword) => { // #ifdef APP-PLUS let webView = this.$mp.page.$getAppWebview(); webView.setTitleNViewSearchInputText(keyword); // #endif // #ifdef H5 let inputSearch = document.querySelector('.uni-input-input\[type=search\]'); var evt = new InputEvent('input', { inputType: 'insertText', data: keyword, dataTransfer: null, isComposing: false }); if (inputSearch) { inputSearch.value = keyword; inputSearch.dispatchEvent(evt); } // #endif } ``` 这段代码中,`setNavSearchInput`函数用于动态设置导航栏搜索框的内容。在APP-PLUS平台下,通过`setTitleNViewSearchInputText`方法来设置导航栏搜索框的内容。在H5平台下,通过获取搜索框元素并触发`input`事件来设置搜索框的内容。 希望以上信息对你有帮助。 #### 引用[.reference_title] - *1* [溢出显示省略号、uni-app动态设置导航栏搜索框内容](https://blog.csdn.net/qq_42714690/article/details/105491119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值