how to set visibility GONE like android in IOS? - android

Anybody know a simple way to hide a label and let the other views of the screen use the place left blank ? And make the opposite when showing back that view. Something like Android setVisibility = GONE for layers.
As far as I know, using setHidden=true only hide the view from the screen but does not rearrange anything around it.
Thank you

The only way to achieve Androids .GONE functionality on iOS is to use a UIStackView
via Apples documentation
Dynamically Changing the Stack View’s Content The stack view
automatically updates its layout whenever views are added, removed or
inserted into the arrangedSubviews array, or whenever one of the
arranged subviews’s hidden property changes.
SWIFT 3:
// Appears to remove the first arranged view from the stack.
// The view is still inside the stack, it's just no longer visible, and no longer contributes to the layout.
let firstView = stackView.arrangedSubviews[0]
firstView.hidden = true
SWIFT 4:
let firstView = stackView.arrangedSubviews[0]
firstView.isHidden = true

You can achieve this easily using AutoLayout constraints.
Suppose you have three views like this:
+-----+
| A |
+-----+
+-----+
| B |
+-----+
+-----+
| C |
+-----+
and you want to make view B disappear in some cases.
Set up constraints as follows (these are just example values):
B top space to A: 4
C top space to B: 4
B height: 20
Then create an NSLayoutConstraint outlet in your code for B's height. Do this by dragging and dropping the constraint in IB.
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *bHeight;
Finally, to make the view disappear, just do the following:
self.bHeight = 0;
Note that if you are doing this for a tableview cell, you may have cases where you want B to appear in some cells, but not in others.
In this case, you will have to reset the height to its "normal" value for those cells where you want it to be visible.
self.bHeight = 24;

I was looking for simple solution and found it. I don't have to use UIStackView or create outlet for constraint. Just use this:
class GoneConstraint {
private var constraint: NSLayoutConstraint
private let prevConstant: CGFloat
init(constraint: NSLayoutConstraint) {
self.constraint = constraint
self.prevConstant = constraint.constant
}
func revert() {
self.constraint.constant = self.prevConstant
}
}
fileprivate struct AssociatedKeys {
static var widthGoneConstraint: UInt8 = 0
static var heightGoneConstraint: UInt8 = 0
}
#IBDesignable
extension UIView {
#IBInspectable
var gone: Bool {
get {
return !self.isHidden
}
set {
update(gone: newValue)
}
}
weak var widthConstraint: GoneConstraint? {
get {
return objc_getAssociatedObject(self, &AssociatedKeys.heightGoneConstraint) as? GoneConstraint
}
set(newValue) {
objc_setAssociatedObject(self, &AssociatedKeys.widthGoneConstraint, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
}
weak var heightConstraint: GoneConstraint? {
get {
return objc_getAssociatedObject(self, &AssociatedKeys.heightGoneConstraint) as? GoneConstraint
}
set(newValue) {
objc_setAssociatedObject(self, &AssociatedKeys.heightGoneConstraint, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
}
private func update(gone: Bool) {
isHidden = gone
if gone {
for constr in self.constraints {
if constr.firstAttribute == NSLayoutAttribute.width {
self.widthConstraint = GoneConstraint(constraint: constr)
}
if constr.firstAttribute == NSLayoutAttribute.height {
self.heightConstraint = GoneConstraint(constraint: constr)
}
constr.constant = 0
}
} else {
widthConstraint?.revert()
heightConstraint?.revert()
}
}
}
Now, you can call view.gone = true and that's it.

You can use UIStackView if youe app supports ios 9 and above.
but if your app support ios 8 also than You have to achive it using Autolayout and add Height Constrain for View
So if you want hide than just set height constrain value 0.

Related

How to check if a view is visible in future?

I have a view. The view might become visible at some time in the future. When this view is visible I want to call a method. How to do this?
val editText = findViewById<EditText>(R.id.editText)
// editText might become invisible in some time in future
// and in some in future it might visible
if(editText.isVisible(){
// code to be executed
}
Code for View.isVisible() :
fun View.isVisible() = this.visibility == View.VISIBLE // check if view is visible
Is there anything like View.setOnClickListener which could be applied and triggered when the view is visible-
editText.setOnClickListener { view ->
}
click listener is callback when the view is being clicked. it has no concern with its visibility. There is no method like isVisible(). to check Visibility
if(yourView.getVisiblity()==View.VISIBLE){ //your task}
for kotlin:
if(youView.visibility==View.VISIBLE){//your task}
I might initialize a variable int status of visibility and set it to 0 with the view invisible.
Now I would create a function instead directly setting the visibility of the view.
For example a function named onVisibilityChanged();
In that function add the set visibility code followed by setting the int to 0 or 1 as per the visibility an if-else block.
If you just set the view to visible, set the int to 1.
The reason for adding if-else block is to configure your actions based on the visibility status.
So that gives you the freedom to do whatever you want bases on the visibility.
Make sure you add this code in such a way that it is executed anytime you want.
Use the performClick() function to click any button or any other view.
I hope you understand. Or comment any query. I would have posted the code for the same but it looks like you are using Kotlin. So I'll try to post it in Kotlin if possible.
The main intention of doing such a thing is when the value of int changes, the app knows what to do and also knows that visibility has changed.
Just call the function wherever you want. It will be easy.
So this is what I am trying to do:
int visibilityStatus;
textview = findViewById(R.id.textview);
getInitialVisibility();
funcOnVisibilityChange();
}
private void getCurrentVisibility() {
if (textview.getVisibility() == View.VISIBLE) {
visibilityStatus = 1;
} else {
visibilityStatus = 0;
}
}
private void funcOnVisibilityChange() {
//Now change the visibility in thia function
textview.setVisibility(View.VISIBLE);
int currentVisibilityStatus;
if (textview.getVisibility() == View.VISIBLE) {
currentVisibilityStatus = 1;
} else {
currentVisibilityStatus = 0;
}
if (visibilityStatus != currentVisibilityStatus) {
//Visibility status has changed. Do your task
else {
//visibility status not changed
}
}
}
So all that we are doing is getting visibility of the view when the app is started and when you somehow change its visibility. Here in the example, I've directly changed the visibility. So wherever you know that visibility is going to change just put the funcOnVisibilityChange() and it will do your job... hope it helps. Let me know if you need more clarification.

Need to check array of imageviews for backgroundresource, clickable or imageresource (Android)

I'm creating a memory app (you know where you have to select 2 images and match them). I'm looking for a way to check when there are no images left so I can show a message.
I have this code to check if the images match. I'm working with 2 arrays, 1 holds the imageviews and their position in the grid (playfield) and one holds the reference for which image is on that imageview (cards).
private void checkCards() {
if (cards[value1] == cards[value2]) {
playfield[value1].setBackgroundResource(R.drawable.border_red);
playfield[value2].setBackgroundResource(R.drawable.border_red);
playfield[value1].setClickable(false);
playfield[value2].setClickable(false);
score++;
} else {
playfield[value1].setImageResource(R.drawable.back);
playfield[value2].setImageResource(R.drawable.back);
}
value1 = -1;
value2 = -1;
}
I need to check on one of these conditions:
There are no more imageviews without a red border
There are no more imageviews that are clickable
There are no more imageviews with the R.drawable.back imageresource
However I'm not sure on how to do this? Do any of you have an idea or even a better method?
Thanks in advance!
I would keep a counter of each one, I can think on more complicated solutions, but a pretty straightforward one will be to have a counter and increase that counter when you're assigning the clickables, the borders, etc... e.g:
private void checkCards() {
if (cards[value1] == cards[value2]) {
playfield[value1].setBackgroundResource(R.drawable.border_red);
playfield[value2].setBackgroundResource(R.drawable.border_red);
playfield[value1].setClickable(false);
playfield[value2].setClickable(false);
mCounterClickables--; // one less clickable
mRedDrawables++; // one more Red Drawable
mBlackDrawables--;
score++;
} else {
playfield[value1].setImageResource(R.drawable.back);
playfield[value2].setImageResource(R.drawable.back);
mBlackDrawables++; //
}
value1 = -1;
value2 = -1;
}
Then to validate that you're done:
public boolean imDone() {
return mBlackDrawables == 0 && mCounterClickables== 0
&& mRedDrawables == playfield.length;
}
Does it makes sense?
In this way you don't have to iterate over and over again, you will always have track of what the user has done.
Btw. The initial state of your variables should be something like this:
int mBlackDrawables = 0, mCounterClickables = playfield.length, mRedDrawables = 0;

Xamarin.Forms: wrong button text alignment after click (Android)

I have a problem with Xamarin.Forms (version 1.2.2) on Android (Nexus 5).
The alignment of Button.Text is often not centered after performing a click.
In a short project, I figured out, that updating the UI causes the problem.
public class App
{
public static Page GetMainPage()
{
var label = new Label {
Text = "label",
};
var buttonBad = new Button {
Text = "buttonBad",
Command = new Command(() => label.Text += "1"),
};
var buttonGood = new Button {
Text = "buttonGood",
};
return new ContentPage {
Content = new StackLayout {
Children = {
buttonBad,
buttonGood,
label,
}
}
};
}
}
A click on "buttonBad" (updating the label.Text) causes the text-alignment of this button to not be centered anymore. A click on "buttonGood" does not cause the problem.
Is there a good workaround to solve this problem?
This workaround seems to be too complicated:
http://forums.xamarin.com/discussion/20608/fix-for-button-layout-bug-on-android
edit:
A programatically edit of the UI also cases the bug. Changing the label.Text in an async method after a short waiting leads the "buttonGood" to align its text wrong after a click.
edit2:
I created an example / test project on GitHub:
https://github.com/perpetual-mobile/ButtonTextAlignmentBug.git
The alignment is correct, when the StackLayout is replaced by an AbsolutLayout, but i need the StackLayout to work well.
Ok, after hours of dealing with this silly bug, I resolved it by implementing a custom renderer and overriding ChildDrawableStateChanged:
public override void ChildDrawableStateChanged(Android.Views.View child)
{
base.ChildDrawableStateChanged(child);
Control.Text = Control.Text;
}

How to disable all buttons in a Layout?

The way app works is the following: App prompts 30 buttons to user and user may guess the right ones by tapping. When user taps some button all the buttons (say a view containing these buttons) should be locked while corresponding (right or wrong guess) animation is playing. Tapped button by itself should be disabled till the next round. After animation is finished all not tapped previously buttons (say a view containing these buttons) should be available again.
So I have a Layout which includes another layout with these 30 buttons:
...
<RelativeLayout
android:id="#+id/alphabetContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include layout="#layout/alphabet" />
</RelativeLayout>
...
Now I need to lock the buttons from being clicked and then unlock. So I tried:
...
private RelativeLayout alphabetPanel;
...
public void onCreate(){
...
alphabetPanel = (RelativeLayout) findViewById(R.id.alphabetContainer);
...
}
...
private void lockButtons(){
alphabetPanel.setEnabled(false);
}
but this doesn't lock buttons. I also tried:
alphabetPanel.setFocusable(false);
alphabetPanel.setClickable(false);
Doesn't help either. Seems like it all relies only to a layout by itself but not the views it contains.
Also I tried to add a fake layout to place it over layout with buttons by bringing it to the front. This is a workaround and its tricky cuz both layouts must be placed inside a RelativeLayout only:
...
blockingLayout = new RelativeLayout(this);
blockingLayout.setLayoutParams(alphabetPanel.getLayoutParams());
...
but this works very strange: somehow both layouts in this case appears and disappears every second or so or doesn't appear at all - I cant understand that at all cuz there is no setVisibility() method used in code!
The only one way left is to iterate every view (button) to make it disabled and than back.
Is there any other way?
UPDATE
Finally I had to add a "wall"-layout into the xml. Now by making it clickable and focusable it becomes a solution.
Try setting for each Button's xml definition
android:duplicateParentState="true"
I'm not sure, but I think it should make them not only to seem disabled, but also to act accordingly.
Hmm it surprises me that disabling the parent-layout doesn't work.. as far as i know it should.
Try fetching your included layout instead, and disable that.
Anyway, if all else fails you can always loop through the buttons themselves.
for(int i=0;i<relativeLayout.getChildCount();i++){
View child=relativeLayout.getChildAt(i);
//your processing....
child.setEnabled(false);
}
I used extension to lock and unlock the view
//lock
fun View.lock() {
isEnabled = false
isClickable = false}
//unlock
fun View.unlock() {
isEnabled = true
isClickable = true}
if you want to lock all children of the view group
//lock children of the view group
fun ViewGroup.lockAllChildren() {
views().forEach { it.lock() }}
//unlock children of the view group
fun ViewGroup.unlockAllChildren() {
views().forEach { it.unlock() }}
firstly define your button
Button bit = (Button)findViewById(R.id.but);
bit.setEnabled(false);
and set enabled false;
Java:-
public void disableButtons(Layout layout) {
// Get all touchable views
ArrayList<View> layoutButtons = layout.getTouchables();
// loop through them, if they are instances of Button, disable them.
for(View v : layoutButtons){
if( v instanceof Button ) {
((Button)v).setEnabled(false);
}
}
}
Kotlin:-
fun disableButtons(layout: Layout) {
// Get all touchable views
val layoutButtons: ArrayList<View> = layout.getTouchables()
// loop through them, if they are instances of Button, disable them.
for (v in layoutButtons) {
if (v is Button) {
(v as Button).setEnabled(false)
}
}
}
Retrieve all touchables views into an ArrayList, then loop through them and check if it is an instance of the Button or TextView or which ever you want, then disable it!
In case data binding is needed
import android.view.ViewGroup
import android.widget.Button
import androidx.core.view.children
import androidx.databinding.BindingAdapter
#BindingAdapter("disableButtons")
fun ViewGroup.setDisableButtons(disableButtons: Boolean) {
children.forEach {
(it as? Button)?.isEnabled = !disableButtons
}
}
Usage:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/guideline"
app:disableButtons="#{vm.busy}">
....
</androidx.constraintlayout.widget.ConstraintLayout>
Might work in constraint layout . Use group widget and add all the button ids.
In the java code set enabled false for the group.
For disable all buttons in any nested layouts.
void DisableAllButtons( ViewGroup viewGroup ){
for( int i = 0; i < viewGroup.getChildCount(); i++ ){
if( viewGroup.getChildAt(i) instanceof ViewGroup ){
DisableAllButtons( (ViewGroup) viewGroup.getChildAt(i) );
}else if( viewGroup.getChildAt(i) instanceof Button ){
viewGroup.getChildAt(i).setEnabled( false );
}
}
}
write these two lines on your button declartion in XML
android:setEnabled="false"
android:clickable="false"

can i access an element within a view, with only access to the view's reference variable?

If I have a view - myCoolView - and I'd like to change the text of a button in the view, how do I do it?
Given that I know that the button is called, say, myCoolButton, and it was added to the view in some function, and now, in a different function I have access to myCoolView, how do I change the button text?
I checked the Titanium API and I cannot see a "getter" call on a view to access anything that was added to it via the add method.
Use the "children" property, as documented.
// Create the views.
var myCoolView = Ti.UI.createView();
var myCoolButton = Ti.UI.createButton({
title: 'My Cool Button',
id: 'myButtonsID'
});
myCoolView.add(myCoolButton);
// Later, find the button.
var children = myCoolView.children;
if (children) {
for (var i = children.length - 1; i >= 0; i--) {
if (children[i].id === 'myButtonsID') {
children[i].title = 'My Updated Cool Button';
break;
}
}
}

Categories

Resources